$forceUpdate强制刷新

vue中$forceUpdate强制刷新的使用

$forceUpdate、v-if、key刷新介绍

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的销毁过程