B vue组件重新加载

 简单记录：

简单粗暴的方式：重新加载整个页面
不妥的方式：使用 v-if
较好的方法：使用Vue的内置forceUpdate方法
最好的方法：在组件上进行 key 更改

 if

forceRerender() {
  // 从 DOM 中删除 my-component 组件
  this.renderComponent = false;

  this.$nextTick().then(() => {
    this.renderComponent = true;
  });
}

forceUpdate

// 全局
import Vue from 'vue';
Vue.forceUpdate();

// 使用组件实例
export default {
  methods: {
    methodThatForcesUpdate() {
      // ...
      this.$forceUpdate();
      // ...
    }
  }
}

keys

<template>
  <component-to-re-render :key="componentKey" />
</template>


export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
}

 

 

666