Spring进阶（一）：Springmvc常用注解标签详解（spring springmvc常用注解）
783
2022-05-30
Vue进阶（幺伍零）：Vue key应用
当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
key的两种应用场景
在列表渲染时使用key属性
假设Vue实例的data属性中有一个叫numbers的变量，它的值是[1, 2, 3, 7, 8, 9]：
{{num}}
1
2
3
这种情况下应当是渲染了6个
元素，其中的内容分别对应numbers中6个数字，此时如果numbers变成了[0, 1, 2, 3, 7, 8, 9]，即在数组头部插入了一个数字0，在没有key属性的情况下，渲染输出的更新步骤是这样的：
原先内容为1的
元素内容变成0，原先内容为2的
元素内容变成1，……以此类推，最后新增一个
元素，内容为9。
在这种情况下，Vue会通过改变原来元素的内容和增加/减少元素来完成这个改变，因为没有key属性，Vue无法跟踪每个节点，只能通过这样的方法来完成变更。
让我们对以上代码进行一个小修改：
{{num}}
1
2
3
这里用index变量，根据列表渲染的规则，它实际上对应了数组中每个元素的索引，这样做的好处是它可以使得每个元素的key值都不同，这是很重要的，如果我们要利用key属性的优点，必须保证同一父元素的所有子元素有不同的key属性。
此时如果numbers从[1, 2, 3, 7, 8, 9]变成了[0, 1, 2, 3, 7, 8, 9]，渲染输出的更新步骤就变化了：
新增一个
元素，它的内容为0，并将它插入原先内容为1的元素之前。
在有了key属性之后，Vue会记住元素们的顺序，并根据这个顺序在适当的位置插入/删除元素来完成更新，这种方法比没有key属性时的就地复用策略效率更高。
总体来说，当使用列表渲染时，永远添加key属性，这样可以提高列表渲染的效率，提高了页面的性能。但是key取值不建议使用index,原因详参《Vue进阶（幺伍幺）：Vue 应用key提升页面渲染性能》。
使用key属性强制替换元素
key属性还有另外一种使用方法，即强制替换元素，从而可以触发组件的生命周期钩子或者触发过渡。因为当key改变时，Vue认为一个新的元素产生了，从而会新插入一个元素来替换掉原有的元素。
借用官方文档上的例子：
1
2
3
这里如果text发生改变，整个元素会发生更新，因为当text改变时，这个元素的key属性就发生了改变，在渲染更新时，Vue会认为这里新产生了一个元素，而老的元素由于key不存在了，所以会被删除，从而触发了过渡。
假如没有key属性：
1
2
3
那么当text改变时，Vue会复用元素，只改变元素的内容，而不会有新的元素被添加进来，也不会有旧的元素被删除。
同理，key属性被用在组件上时，当key改变时会引起新组件的创建和原有组件的删除，此时组件的生命周期钩子就会被触发。
Vue 渲染
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
推荐文章
最近发表