前端工作总结及计划,前端工作总结ppt

　　没有钥匙

　　div id=应用程序

　　差异

　　输入类型=text v-model=name

　　按钮@click=add 添加/按钮

　　/div

　　保险商实验所

　　li v-for=(item，i) in list

　　“输入类型=”复选框“{item.name}”

　　/李

　　/ul

　　脚本

　　//创建Vue实例以获取ViewModel

　　var vm=new Vue({

　　埃尔： #app ，

　　数据：{

　　名称： ，

　　纽迪：3，

　　列表：[

　　{id: 1，姓名：里斯 }，

　　{id: 2，姓名：吕不韦 }，

　　{id: 3，姓名：嬴政 }

　　]

　　},

　　方法：{

　　add() {

　　//注意这是非移位的。

　　this . list . un shift({ id:this . newid，name: this.name })

　　this.name=

　　}

　　}

　　});

　　/脚本

　　/div当选吕武卫，加上楠楠，选的确实是李斯，这不是我们想要的结果。我们要的是加了楠楠之后，一种选择是吕武威。

　　key1.jpg

　　key3.jpg

　　是的，钥匙

　　div id=应用程序

　　差异

　　输入类型=text v-model=name

　　按钮@click=add 添加/按钮

　　/div

　　保险商实验所

　　li v-for=(item，i) in list :key=item.id

　　“输入类型=”复选框“{item.name}”

　　/李

　　/ul

　　脚本

　　//创建Vue实例以获取ViewModel

　　var vm=new Vue({

　　埃尔： #app ，

　　数据：{

　　名称： ，

　　纽迪：3，

　　列表：[

　　{id: 1，姓名：里斯 }，

　　{id: 2，姓名：吕不韦 }，

　　{id: 3，姓名：嬴政 }

　　]

　　},

　　方法：{

　　add() {

　　//注意这是非移位的。

　　this . list . un shift({ id:this . newid，name: this.name })

　　this.name=

　　}

　　}

　　});

　　/脚本

　　/div也选吕武威。加上楠楠后，还是选中了吕武威。

　　key2.jpg

　　可以简单理解为，带有key(必须唯一)id的复选框与内容相关联。就是我们想要达到的效果。

　　查了相关文献，传说很清楚。

　　vue和react的虚拟DOM的Diff算法大致相同，其核心基于两个简单的假设。

　　先说diff算法的处理方法，比较运算前后dom树同一层的节点，一层一层，如下图所示：

　　before.png

　　当某一层有很多相同的节点，即列表节点时，Diff算法的更新过程默认也遵循上述原则。

　　例如，考虑这种情况：

　　3297464-ee627869a6714336.jpg

　　我们希望可以在B和c之间添加一个F。默认情况下，Diff算法是这样执行的：

　　3297464-d912523aac5fd108.jpg

　　更新C到F，D到C，E到D，最后插入E，效率低吗？

　　因此，我们需要使用密钥为每个节点创建唯一的标识符，Diff算法可以正确地识别这个节点，找到正确的位置区域并插入新的节点。

　　3297464-650689b4bd4b9eb6.jpg

　　vue中的列表循环需要添加：Key= unique identifier 。唯一标识符可以是项目中的id索引等。因为vue组件的重用性很高，添加key可以标识组件的唯一性。为了更好的区分各个组件，key的作用主要是为了高效的更新。

　　版权归作者所有：原创作品来自博主前端民谣，转载授权请联系作者，否则将追究法律责任。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。