Vue学习：Vue中的列表渲染相关知识点

最新推荐文章于 2025-07-17 19:54:05 发布

原创最新推荐文章于 2025-07-17 19:54:05 发布 · 315 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #学习 #javascript #前端

本文介绍了Vue.js中使用v-for指令遍历数组和对象的方法，详细阐述了key的作用和原理，包括如何通过key优化DOM更新。同时，提到了使用index作为key可能引发的问题，并展示了如何通过计算属性实现列表过滤和排序。

一、通过v-for遍历数组

通过v-for指令基于一个数组来渲染一个列表，形式如下：

<ul>

</li>

</ul>

</div>

const vm=new Vue({

el:"#root",

data:{

persons:[

{id:'001',name:'aaa'},

{id:'002',name:'bbb'}

]

})

</script>

除此之外，v-for还支持一个可选的第二个参数，形如：v-for="(p,key) in persons" :key="key"

二、通过v-for遍历对象

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

三、key的作用与原理

Vue中key的作用（key的内部原理）：

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异的比较，比较的规则：

1、旧虚拟DOM中找到了与新虚拟DOM相同的key：

a：若虚拟DOM中内容没变，直接使用之前的真实DOM；

b：若虚拟DOM中内容变了，则生成新的虚拟DOM，随后替换掉页面之前的真实DOM；

2、旧虚拟DOM中未找到与新虚拟DOM相同的key：

创建新的真是DOM，随后渲染到页面；

用index作为key可能会引发的问题：

1、若对数据进行：逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM更新，界面效果没有问题，但效率低；

2、如果结构中还包含输入类DOM，会产生错误的DOM更新，界面这个时候是有问题的。

四、列表过滤

有时，我们想要显示一个数组经过过滤后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤后的数组。

例如：

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

列表排序也是可以通过计算属性，来返回排序后的数组。