1.$refs的使用：分三种情况

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

2.v-for中key的使用

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

1. 如果你的v-for的元素只是用来展示内容不会再进行添加、删除、排序的操作，有没有key都没有问题，key的值也可以直接去v-for的index 的值。

2.但是如果你的v-for的元素之后还会进行排序、添加、删除则必须添加key，并且key的值最好不要用index。

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

用index作为数组的key

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

用唯一的id作为key

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

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

如果我们的v-for的dom结构变成了这样,并且每个li可以删除
<li v-for="(item) in arr"  key='item.id'>  <input ......./>  </li>

看下实际的项目

页面初始的情况示意图

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

这是我新增了3个联系人
接下来我们来删除第二个联系人：
第一次我们用index 作为key效果如下：
企业微信截图_c7a4b03c-2674-4ea9-9fbd-51462cd4bd5c.png

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

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

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

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

3.组件的props 与 data 的使用方法基本相同。

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

4.对于生命周期的理解

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