Vue 组件强制刷新的办法
v-if通过变量控制的形式,可以触发被控制的组件 beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed 这6个生命周期。即调用该方法后只会触发beforceUpdate,updated这两个生命周期,而且只会影响当前组件以及其插槽内容。v-if切换时,元素及它的绑定数据和组件都会被销毁并重建,导致其控制的内容会发生显示与隐
·
vue 框架数据双向绑定,数据更新页面会自动更新,但某些情况下,我们还需要自己手动更新页面组件。
目前有四种方法可以选择:
1.刷新整个页面
使用router.go(0)或 hisory.go(0)
不推荐使用
2.v-if
v-if通过变量控制的形式,可以触发被控制的组件 beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed 这6个生命周期。
v-if切换时,元素及它的绑定数据和组件都会被销毁并重建,导致其控制的内容会发生显示与隐藏操作。
该方法也不推荐使用
3.使用内置的forceUpdate方法
迫使vue组件重新渲染,实际上指的是强制重启render函数。即调用该方法后只会触发beforceUpdate,updated这两个生命周期,而且只会影响当前组件以及其插槽内容。
import Vue from 'vue'
Vue.forceUpdate()
export default{
methods:{
handleUpdateClick() {
// built-in
this.$forceUpdate()
}
}
}
4、key属性
vue使用key标记组件身份,当key改变时就是释放原始组件,重新加载新的组件。
更多推荐
所有评论(0)