Vue 组件初始化 你 get 了吗

Vue 的双向绑定用着确实方便，但自动档虽好，手动档也不是一无是处；在特定的情况下，还真的要手工触发“刷新”操作，目前有四种方案可以选择：

1. 刷新整个页面（最 low 的，可以借助 route 机制）
2. 使用 v-if 标记（比较 low 的）
3. 使用内置的 forceUpdate 方法（较好的）
4. 使用 key-changing 优化组件（最好的）

force update

组件内置 $forceUpdate 方法，使用前需要在配置中启用

import Vue from 'vue'
Vue.forceUpdate()

export default {
  methods: {
    handleUpdateClick() {
      // built-in
      this.$forceUpdate()
    }
  }
}

key-changing

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

<template>
  <div>
    <span :key="key"></span>
    <div :key="startDate"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        startDate: +new Date(),
        key: 0
      }
    },
    methods: {
      handleUpdateClick() {
        this.key += 1 
      },
      reload: function(){
        this.startDate= +new Date();
      },
    }
  }
</script>

原文链接