vue-列表的渲染

**

vue-列表的渲染

**
vue的列表渲染指令是基于v-for的，官方文档中是这么说的*v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。*便于理解：对于v-for他就必须使用一种特殊的语法，item in items items代表的是数据中的数组，而我们说的这些item代表的就是其中的每一项。并且在v-for中，我们拥有一个权力，可以说这个权力比什么都大，就是说对于父作用域完全访问的权力。

 <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>

官方文档中的这句代码主要表示展示格式进行对照拼写。
其中of 替代 in 作为分隔符，这样就和js的语法相同了，但是没那么必要之时作为知识点梳理方便理解。
最重要的就是再v-for中遍历一个对象再这之前有个必要的知识点：键值key
键值key：现在在使用v-for的时候，都必须会加上一个必要的key值，并且很多人会使用index来作为key，其实这样是不太妥当的一种做法。在为v-for设置键值之后总是用键值与v-for配合使用， 在用v-for更新已渲染的元素列表的时候，会使用就地复用的策略；这就是说列表数据修改的时候，他会根据key值去判断某个值是否修改，如果修改了就重新渲染，不然就复用之前的元素。就是可以通过key值来提升渲染的效率。

const list = [
    {
        id:1,
        name:'test'
    },
    {
        id:2,
        name:'test2',
    },
    {
        id:3,
        name:'test3'
    },
]

<div v-for="(item,index) in list :key="index">{{item.name}}</div>

因为不加key，vue现在会直接报错，所以我使用index作为key；

const list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
    {
        id: 4,
        name: '我是在最后添加的一条数据',
    },
]

此时前三条数据直接复用之前的,新渲染最后一条数据,此时用index作为key,没有任何问题;
维护状态
在javascript中for作为循环遍历的特性来理解，如果列表的节点发生变化时，v-for指令就会从新遍历数据渲染页面，比如添加，删除，替换节点操作，这种情况下一般会有原本没有发生变化的节点被重新渲染，vue给出了解决方案就是在每一项上添加一个唯一标识：v-bind:key=“ID”，id为数据中提供的唯一标识，有了这个唯一标识在节点发生变化时，没有变化的节点会重用，不会重复渲染，这样就大大增强了渲染效率。只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
数组更新检测：
数据变更：

这七个函数是关键
替换数组
变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。Vue 不能检测数组和对象的变化
切记：在组件中使用v-for时设置key值