[JavaScript知识库]Vue子组件重新渲染

vue 子组件V-IF刷新(一般)

组件会根据v-if刷新

<item-one v-if="isref" ref="itemOne"></item-one>

Vue 子组件改变KEY值刷新(最好)

组件会根据key值改变重新生成

key值可以重复使用

item改变的时候会带动key改变

<item-one :key="item" ref="itemOne"></item-one>
<item-tow :key="item" ref="itemTow"></item-tow>
<el-button type="primary" style="margin-top: 12px;" @click="reload()">刷新</el-button>


data() {
    return {
        item: +new Date()
    }
},
methods: {
    reload() {
        this.item = +new Date()
      },
}

使用Vue的内置forceUpdate(较好)

这不会更新任何计算属性，调用forceUpdate仅仅强制重新渲染视图。

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

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