vue 项目的应用总结

（1）在普通dom元素上：this.$refs.aa 拿到的是dom节点,类似于document.querySelector('#aaa')
（2）在组件上: this.$refs.aa 拿到的是该组件对象，可以拿到该组件的data，method。。
（3）在v-for的情况下，不论是在组价还是dom 上，拿到的都是一个数组this.$refs.aa[0] 拿到的才是我们想要的数据。

     key的作用相当于给v-for的内容（组件或者原生的dom）添加一个id，在vue的虚拟dom的diff计算时来进行唯一标识一个元素。

假如有一个数组：arr = [ {content: '111111'}, {content: '222222'}, {content: '33333'}, ],

利用v-for生成一个列表：
{{item.content}}
生成后的代码为
11111111
22222222
33333333
第一种情况：
现在我们对数组进行排序变成：arr = [ {content: '333333'}, {content: '222222'}, {content: '11111111'}, ],
则生成后的代码为
33333333
22222222
11111111
vue 在进行虚拟dom的diff算法是会对比两次的不同，然后发现1项与3项内容变了就会重新渲染这两个dom。
第二种情况：
假如我们对该数组排序变成：arr = [ {content: '333333'},{content: '11111111'}, {content: '222222'} ]
则生成后的代码变成
33333333
111111111
22222222
vue 在进行虚拟dom的diff算法是会对比两次的不同，然后发现1，2，3项都不一样了，整个列表的3项都会重新渲染。

假如我们先操作数组给每个对象添加一个唯一的id
arr = [{content: '11111111', id: 1}, {content: '222222', id: 2},  {content: '333333'，id：3} ]
利用v-for生成一个列表：{{item.content}}生成后的代码为111111112222222233333333对比上面的两种情况
第一种情况变为333333332222222211111111vue 在进行虚拟dom 的diff算法时发现1，2，3项的内容没有变化，只是位置发生了变化。然后会将1，3 的位置进行互换
第二种情况变为333333331111111122222222vue 在进行虚拟dom 的diff算法时发现1，2，3项的内容没有变化，只是第三项的位置发生了变化

有些时候必须用id作为key，二不能用index。

如果我们的v-for的dom结构变成了这样,并且每个li可以删除
    

看下实际的项目

页面初始的情况示意图

这个页面中可以删除与添加联系人如下

这是我新增了3个联系人

接下来我们来删除第二个联系人：
第一次我们用index 作为key效果如下：

企业微信截图_c7a4b03c-2674-4ea9-9fbd-51462cd4bd5c.png

第二次我们用唯一的id作为key效果如下：

企业微信截图_4a97f144-307c-4cb3-a172-41a136f26c32.png

原因分析：
如果用index作为key
删除第二项时相当于从
变成了：
vue 的虚拟dom的计算结果：会变成删除了第三项
如果用id作为key
删除第二项时相当于从
变成了：
vue 的虚拟dom的计算结果：会变成删除了第二项，这才是我们想要的结果

结论：通过比对用index 与 id 做key的两种情况，用id做key的性能消耗明显的更小，效率更高一些。

都可以直接在template 中进行绑定，
可以在父组件中this.$refs.a.propsA,直接拿到
都可以用来进行watch 与 computed

created: 可以拿到props与data
mounted：可以拿到dom或组件

作者：调皮的绅士
链接：https://www.jianshu.com/p/26ab70a4b90c