vue小技巧

v-for设置键值缘由

<!--模板部分-->
<div id="app">
    <div v-for="item in arr">
        {{item}}
        <input/>
    </div>

    <button @click="deleteData">删除第二个元素</button>
</div>

// js 部分
new Vue({
    el: '#app',
    data() {
        return {
            arr: [1,2,3]
        }
    },
    methods:{
        deleteData() {
            this.arr.splice(1,1)
        }
    }
})

若要删除第二个元素，不使用key值或使用索引值作为key的情况都是一样。即索引值正确，但输入框前面的数字显示不正确。

而使用唯一值作为key值则是正确的。为什么v-for需要设置key，原因很简单。 对比数组 [1,2,3]和[1,3]，我们很容易发现删掉了2，但是计算机不是这样的逻辑：

1. 计算机对比新旧数组，发现1 === 1，保持不变。
2. 然后再对比2，发现2变成了3，便直接将2改为3，原来第二行的input元素可以复用。
3. 然后再对比3和undefined，发现3被删了，索引把第三行的元素删除。

那么为什么不能用索引作为key呢？ 当删掉[1,2,3]中的2之后，数组的长度由3变成了2，那么原来数字3的索引就变成了数字2的索引了。

1. 计算机对比key为0的值，发现都是1，保持不变
2. 计算机对比key为1的值，发现从2变成了3，元素复用， 修改元素上面的文字
3. 计算机对比key为2的值，发现被删掉了，所以删掉第三行元素

而对于使用id作为key,那么每条数据都有了唯一的标识，当删掉[{id:'1',value: 1},{id: '2',value: 2}, {id: '3', value:3}]中的第二个，整个过程如下

1. 计算机取出新数据第一项的id，然后在原来数据里面寻找，发现存在相同id的数据，而且数据没有变化，所以保持不变
2. 计算机继续取第二项的id，发现是3，然后从原来数据里面也找到了3，所以3保留
3. 这时候旧数据里面剩了id为2的数据，而新的里面没有了，所以删掉。

vue的数据必须返回一个函数

假设我们现在开发了一个组件，组件上面的data是一个普通的对象，那么当我们实例化多个组件的时候，所有的实例将共享引用同一个数据对象，任何一个实例对数据的修改都会影响到其他实例。而将组件上面的数据定义为一个函数之后，当实例化多个组件的时候，每个实例通过调用 data 函数，从而返回初始数据的一个全新副本数据对象，这时候就避免了对象引用。