代码详解Vue中key的作用示例 |
您所在的位置：网站首页 › vue中key的原理 › 代码详解Vue中key的作用示例 |
代码详解Vue中key的作用示例
 Vue中key的作用 key的特殊attribute主要用在Vue的虚拟DOM算法，在新旧Nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改、复用相同类型元素的算法，而使用key时，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。此外有相同父元素的子元素必须有独特的key，重复的key会造成渲染错误。 相关学习推荐：javascript视频教程 描述 首先是官方文档的描述，当Vue正在更新使用v-for渲染的元素列表时，它默认使用就地更新的策略，如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态的列表渲染输出，例如表单输入值。为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute，建议尽可能在使用v-for时提供key attribute，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。 简单来说，当在列表循环中使用key时，需要使用key来给每个节点做一个唯一标识，diff算法就可以正确的识别此节点，找到正确的位置直接操作节点，尽可能地进行重用元素，key的作用主要是为了高效的更新虚拟DOM。此外，使用index作为key是并不推荐的做法，其只能保证Vue在数据变化时强制更新组件，以避免原地复用带来的副作用，但不能保证最大限度的元素重用，且使用index作为key在数据更新方面和不使用key的效果基本相同。 示例 首先定义一个Vue实例，渲染四个列表，分别为简单列表与复杂列表，以及其分别携带key与不携带key时对比其更新渲染时的速度，本次测试使用的是Chrome 81.0，每次在Console执行代码时首先会进行刷新重新加载界面，避免浏览器以及Vue自身优化带来的影响。 Vue{{item}} {{item}} {{value}} {{value}} var vm = new Vue({ el: '#app', data: { simpleListWithoutKey: [1, 2, 3, 4, 5, 6], simpleListWithKey: [1, 2, 3, 4, 5, 6], complexListWithoutKey:[ {id: 1, list: [1, 2, 3]}, {id: 2, list: [4, 5, 6]}, {id: 3, list: [7, 8, 9]} ], complexListWithKey:[ {id: 1, list: [1, 2, 3]}, {id: 2, list: [4, 5, 6]}, {id: 3, list: [7, 8, 9]} ], } })简单列表 在简单列表的情况下，不使用key可能会比使用key的情况下在更新时的渲染速度更快，这也就是官方文档中提到的，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。在下面的例子中可以看到没有key的情况下列表更新时渲染速度会快，当不存在key的情况下，这个列表直接进行原地复用，原有的节点的位置不变，原地复用元素，将内容更新为5、6、7、8、9、10，并添加了11与12两个节点，而存在key的情况下，原有的1、2、3、4节点被删除，5、6节点保留，添加了7、8、9、10、11、12六个节点，由于在DOM的增删操作上比较耗时，所以表现为不带key的情况下速度更快一些。 // 没有key的情况下 console.time(); vm.simpleListWithoutKey = [5, 6, 7, 8, 9, 10, 11, 12]; vm.$nextTick(() => console.timeEnd()); // default: 2.193056640625ms// 存在key的情况下 console.time(); vm.simpleListWithKey = [5, 6, 7, 8, 9, 10, 11, 12]; vm.$nextTick(() => console.timeEnd()); // default: 3.2138671875ms原地复用可能会带来一些副作用，文档中提到原地复用这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时DOM状态的列表渲染输出，例如表单输入值。 在不设置key的情况下，元素中没有与数据data绑定的部分，Vue会默认使用已经渲染的DOM，而绑定了数据data的部分会进行跟随数据渲染，假如操作了元素位置，则元素中未绑定data的部分会停留在原地，而绑定了data的部分会跟随操作进行移动，在下面的例子中首先需要将两个A之后的输入框添加数据信息，这样就制作了一个临时状态，如果此时点击下移按钮，那么不使用key的组中的输入框将不会跟随下移，且B到了顶端并成为了红色，而使用key的组中会将输入框进行下移，且A依旧是红色跟随下移。 就地复用采用就地复用策略(vuejs默认情况) {{p.name}} 下移 不采用就地复用策略(设置key){{p.name}} 下移 new Vue({ el: '#app', data: { persons: [ { id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 3, name: 'C' } ] }, mounted: function(){ // 此DOM操作将两个A的颜色设置为红色 主要是为了演示原地复用 document.querySelectorAll("h3 + p > span:first-child").forEach( v => v.style.color="red"); }, methods: { down: function(i) { if (i == this.persons.length - 1) return; var listClone = this.persons.slice(); var one = listClone[i]; listClone[i] = listClone[i + 1]; listClone[i + 1] = one; this.persons = listClone; } } });复杂列表 使用key不仅能够避免上述的原地复用的副作用，且在一些操作上可能能够提高渲染的效率，主要体现在重新排序的情况，包括在中间插入和删除节点的操作，在下面的例子中没有key的情况下重新排序会原地复用元素， 但是由于v-if绑定了data所以会一并进行操作，在这个DOM操作上比较消耗时间，而使用key得情况则直接复用元素，v-if控制的元素在初次渲染就已经决定，在本例中没有对其进行更新，所以不涉及v-if的DOM操作，所以在效率上会高一些。 console.time(); vm.complexListWithoutKey = [ {id: 3, list: [7, 8, 9]}, {id: 2, list: [4, 5, 6]}, {id: 1, list: [1, 2, 3]}, ]; vm.$nextTick(() => console.timeEnd()); vm.$nextTick(() => console.timeEnd()); // default: 4.100244140625msconsole.time(); vm.complexListWithKey = [ {id: 3, list: [7, 8, 9]}, {id: 2, list: [4, 5, 6]}, {id: 1, list: [1, 2, 3]}, ]; vm.$nextTick(() => console.timeEnd()); // default: 3.016064453125ms以上就是代码详解Vue中key的作用示例的详细内容，更多请关注php中文网其它相关文章！ |
【本文地址】
今日新闻 |
推荐新闻 |