这里暂停一下,我要问个问题吗? 请问,在比较两者的input时,那些input的内容是否相等?
答案是一样的。 因为两者都是虚拟DOM
用户输入数据时,数据会保留在真实DOM中
人是在存储器中进行比较的虚拟DOM,
最终input这里比较的结果相等
比较一下和刚才不同的东西怎么样? 同样的东西怎么办?
同样的结果是复用
多路复用是什么?
你看,我小刘那里也有input。 你张三那里也有input
我刘先生的key是0,你张三的key也是0
那么作为唯一的标志,我们来自同一个体系
否则,你这个张三的虚拟DOM一定转换过真的DOM吧
看安妮,张三的input转换成了真的DOM。 那么,我小刘的输入和张三的输入一样
我的刘先生不需要把li里的input转换成真正的DOM
我直接拿着张三的input多路复用
还发生了以下事情
比较了虚拟DOM
比较的结果决定了是否使用前面张三的实际输入。 (不需要将刘先生的虚拟输入转换为实际的输入。
但是鹅张三的真的在输入中还留有用户的输入
那么,搬家的时候,我一起带来了残留输入
哪里错了
使用index作为key会导致复用的发生,顺序混乱
由于这个细节错误的出现,引起了位置偏移的生成
这样,到了王五的时候,因为key=3不存在于旧的虚拟DOM中,所以只有自己生成
我们发生这个错误的原因是因为执行了这个奇怪的需求,但是通过这个需求我们可以更深入地理解key了
看看图吧。 图中做了很好的说明
两者的输入相等,在虚拟DOM中
但是两者的插值语法这个位置
如果不相等,不相等,就不能采用复用行为
如果没有采用复用动作的方法,插值语法这里的实际DOM就需要自己生成
也就是说,此块是新的虚拟DOM转换为真正的DOM后自己生成的
通过上面的分析,这里的思路清晰了
同样,由于这些初始化数据,我们在存储器内生成了虚拟DOM
将虚拟DOM转换为实际DOM
用户在现实DOM中进行操作,留下了输入
接下来我们追加了成员。 刘先生
虚拟DOM已更新
更新后,将其与旧的虚拟DOM进行比较
刘先生的key是004,旧的DOM中没有key是004的元素,刘先生需要自己生成
张三的key是001,旧的虚拟DOM里有吗? 是的,那么input是一样的吗? 一样的。 那个多路复用就可以了
李四和王五也一样
所以把id作为key使用不是刚才的问题
效率好还是高。 因为服用了,所以错位了吗?没有
如果不写key,则vue在遍历期间缺省使用索引值index作为key
既然index变成了key,这个DOM里就有key,所以不会报告错误
既然index变成了key,遇到刚才的问题当然就会发生问题
分下一步回答
发表评论