[用户输入数据会保留在真实dom中吗]用户输入数据会保留在真实dom中

这里暂停一下,我要问个问题吗? 请问,在比较两者的input时,那些input的内容是否相等?

答案是一样的。 因为两者都是虚拟DOM

用户输入数据时,数据会保留在真实DOM中

image-20221028153050726

人是在存储器中进行比较的虚拟DOM,

最终input这里比较的结果相等

image-20221028155106931

比较一下和刚才不同的东西怎么样? 同样的东西怎么办

同样的结果是复用

多路复用是什么

image-20221028155435461

你看,我小刘那里也有input。 你张三那里也有input

刘先生的key是0,你张三的key也是0

那么作为唯一的标志,我们来自同一个体系

否则,你这个张三的虚拟DOM一定转换过真的DOM吧

image-20221028155613207

看安妮,张三的input转换成了真的DOM。 那么,我小刘的输入和张三的输入一样

我的刘先生不需要把li里的input转换成真正的DOM

image-20221028155809293

我直接拿着张三的input多路复用

还发生了以下事情

image-20221028155903526

比较了虚拟DOM

比较的结果决定了是否使用前面张三的实际输入。 (不需要将刘先生的虚拟输入转换为实际的输入。

但是鹅张三的真的在输入中还留有用户的输入

那么,搬家的时候,我一起带来了残留输入

哪里错了

使用index作为key会导致复用的发生,顺序混乱

由于这个细节错误的出现,引起了位置偏移的生成

这样,到了王五的时候,因为key=3不存在于旧的虚拟DOM中,所以只有自己生成

image-20221028160351939

我们发生这个错误的原因是因为执行了这个奇怪的需求,但是通过这个需求我们可以更深入地理解key了

image-20221028160837061

看看图吧。 图中做了很好的说明

两者的输入相等,在虚拟DOM中

但是两者的插值语法这个位置

image-20221028160913980

如果不相等,不相等,就不能采用复用行为

如果没有采用复用动作的方法,插值语法这里的实际DOM就需要自己生成

也就是说,此块是新的虚拟DOM转换为真正的DOM后自己生成的

image-20221028161023662

image-20221028161150534

通过上面的分析,这里的思路清晰了

同样,由于这些初始化数据,我们在存储器内生成了虚拟DOM

image-20221028161431657

将虚拟DOM转换为实际DOM

image-20221028161439648

用户在现实DOM中进行操作,留下了输入

image-20221028161448483

接下来我们追加了成员。 刘先生

虚拟DOM已更新

image-20221028161458620

更新后,将其与旧的虚拟DOM进行比较

刘先生的key是004,旧的DOM中没有key是004的元素,刘先生需要自己生成

image-20221028161517890

张三的key是001,旧的虚拟DOM里有吗? 是的,那么input是一样的吗? 一样的。 那个多路复用就可以了

李四和王五也一样

image-20221028161524804

所以把id作为key使用不是刚才的问题

效率好还是高。 因为服用了,所以错位了吗?没有

如果不写key,则vue在遍历期间缺省使用索引值index作为key

既然index变成了key,这个DOM里就有key,所以不会报告错误

既然index变成了key,遇到刚才的问题当然就会发生问题

分下一步回答

image-20221028161945156

image-20221028161959662

image-20221028162027090

image-20221028162044189


发表评论

Copyright 2002-2022 by 琮莫零食网(琼ICP备2022001899号-3).All Rights Reserved.