vue中$forceUpdate强制刷新的使用
$forceUpdate、v-if、key刷新介绍
1.$forceUpdate (只会触发beforeUpdate、updated)
#作用:
当在data中某个内容进行了改变、但是页面没有进行刷新、而控制台能进行打印证明数据确实改变了,此时就可以用来强制当前 组件刷新
#常见场景:
在v-for循环或者某个操作中对data中的内容进行增加、修改、或者删除操作,data中的数据确实改变了,而且打印的内容也改 变了,但是页面却没有刷新达到理想效果,这里则可以使用this.$forceUpdate()
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;
}
}
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
};
},
}
</script>
注意:当key值改变的时候,child子组件实际上经历了新的child的创建过程以及旧的child的销毁过程