先来看看v-if。
Vue在渲染元素的时候，出于效率考虑，会尽可能地复用已有的元素而非重新渲染。
如果不希望复用，可以用key去指定，key的值必须是唯一的。
v-if与v-show
v-show只是简单的CSS属性切换，无论条件真与否，都会被编译。
相比之下，v-if更适合条件不经常改变的场景，因为它切换的开销较大，而v-show适用于频繁切换条件。
所以说设定key目的是：
- 防止两个结构一样但是变量值不同的DOM不渲染
- key的特殊属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复,再利用相同类型元素的算法。使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。
缺点: key具有缓存，有时候会导致元素不更新，复用了某老元素
diff算法比较
- 同一层级比较
- 标签名不同，直接删除掉，不继续深度比较
- 标签名相同，key相同（这就是在写v-for的时候要加的key），就认为是相同节点，不继续深度比较
vue的虚拟DOM是基于snabdom库的
- 生成vnode
- patch函数 会在最开始的时候渲染一次patch(container,vnode)，将vnode添加到容器中；然后在更新完成之后，会再执行一次patch(vnode,newVnode) 比较的时候通过sameVnode函数返回vnode1.key === vnode2.key && vnode1.sel === vnode2.sel
双向绑定：v-model
一个小细节：使用v-model时，如果是用中文输入，在打拼音还没敲回车之前，是不会触发更新的。
如果希望总是更新用@input来替代v-model