vue使用v-if之后组件没有重新渲染问题解决办法以及原理

vue使用v-if之后组件没有重新渲染问题解决办法以及原理

问题产生：

在开发需求的时候一个vue页面需要被不同的数据进行渲染，于是考虑到用v-if进行控制，使用v-if之后发现页面中引入组件的数据没有进行变化，由此对vue是如何渲染页面以及数据
进行深度排查。

问题原因:

组件太相似，vue没有识别出来，所以导致数据没有更新。

解决办法：

给需要更新的组件加上一个不同的 key,即可解决v-if之后组件没有重新渲染问题。

<div class="head" :key="1">
 </div>
<div class="head" :key="2">
</div>

解决办法原理：

首先需要知道key的作用：
1.key的主要作用是为了高效的更新虚拟dom
2.元素的唯一性，diff方法中提高了匹配元素index的性能。有key时遍历key-index对象（快），无key时遍历旧Vnode（慢）
3.在元素list一直变化的情况下，key值设置唯一时，能很精确找到/找不到变更元素，key不唯一时，不能精确找到要匹配的元素。
4.使用key属性强制替换元素
大家可以看一下vue源码中对key的应用和处理（写的更加详细）：
源码系列地址：https://vue-js.com/learn-vue/start/