Vue变量的数据已更新，但for遍历出的dom元素没有变化的解决办法

原因

原因一：

如果使用了 v-for 指令来渲染一组组件，那么每个组件都会被分配一个唯一的 key 值。当数据源发生变化时，Vue 会尝试重用已有组件，而不是重新创建。

当 dataList 元素减少时，如果你没有给组件分配 key 值，Vue 就不知道哪些组件是新的，哪些组件是旧的，导致页面数据没有更新。

原因二：

使用了插槽传值

原因三

在异步代码中修改了数据，Vue 可能无法立即监听到变化

解决办法

办法一：

包括所包含的子组件在内，都加上:key='唯一的值'的属性；

办法二：

如果需要子组件数据动态改变，使用v-bind的方式，插槽不支持动态识别改变。
如：

<child-component
	...
	:xxx="var"
	...
>
<!-- 动态变化，不要使用插槽 -->
</child-component>

办法三：

将赋值逻辑放入nextTick()函数，如this.$nextTick(() => {你原来需要赋值的逻辑})