<a href='http://www.qiutianaimeili.com/html/page/2019/03/7802qotr1x9.html'>vue中$forceUpdate强制刷新的使用</a>
<a href='https://blog.csdn.net/lxy869718069/article/details/106140090/'>$forceUpdate、v-if、key刷新介绍</a>
1.$forceUpdate (只会触发beforeUpdate、updated)
#作用：
当在data中某个内容进行了改变、但是页面没有进行刷新、而控制台能进行打印证明数据确实改变了，此时就可以用来强制当前 组件刷新
#常见场景：
在v-for循环或者某个操作中对data中的内容进行增加、修改、或者删除操作，data中的数据确实改变了，而且打印的内容也改 变了，但是页面却没有刷新达到理想效果，这里则可以使用this.$forceUpdate()
//另一种解决方式可以使用 Vue.$set()的方法替代直接取值赋值的方式进行数据上的设置与改变
// dataArray:[]
// carList:[]
for(var i=0; i<this.dataArray.length; i++){
let flag = false; //默认没有选中
for(var j=0; j<this.carList.length; j++){ //检测某个数组选项是否已中过
if(this.dataArray.code == this.carList[j].name){
flag = true;
break;
}
}
// 给数组的每个项的disabled都赋值要么是true，要么为false
this.dataArray[i].disabled = flag;
}
}
// 这种情况下有可能会导致代码执行完毕数据确实改变了，但是页面没刷新的情况。
// 因此需要下面的内容
this.$forceUpdate();
2.v-if通过变量控制的形式(在项目中比较少见)，可以触发被控制的组件 beforeCreate、created、beforeMount、mountedbeforeDestroy、destroyed 这6个生命周期，关闭的时候子组件会触发beforeDestroy、destroyed两个生命周期 (父控制显隐对子组件刷新)
3.通过key属性来进行刷新操作(效果是最理想的)，因为页面根本感觉不到组件的销毁与创建过程，确实满足了组件的刷新功能
操作方式：在data中定义某个变量，然后将该变量放置在组件的key属性中，要实现该组件刷新时，只需改变变量的值即可
<template>
<child ref="child1" :key='indexKey'></child>
</template>
<script>
import child from "./child";
export default {
components: { child },
data() {
return {
indexKey: 0 // 只需要通过操作如点击事件改变这个值，child子组件就会刷新，而且视觉上不会有变化
};
},
}
</script>
注意：当key值改变的时候，child子组件实际上经历了新的child的创建过程以及旧的child的销毁过程
