Vue组件强制刷新的方法

大家好，欢迎来到IT知识分享网。

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函数。即调用该方法后 只会触发beforeUpdate、updated这两个生命周期，而且只会影响当前组件以及其插槽内容。

import Vue from 'vue'
Vue.forceUpdate()
export default { 
   
  methods: { 
   
    handleUpdateClick() { 
   
      // built-in
      this.$forceUpdate()
    }
  }
}

4、key属性

vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。