Vue 组件强制刷新的办法

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改变时就是释放原始组件，重新加载新的组件。