VUE组件重新渲染（组件重载）的3种方式

VUE 组件重新渲染（组件重载）的3种方式

1.使用 v-if

v-if可以实现 true (加载)和false(卸载)

// html 
<CompTable ref="CompTable" v-if="tableShow"/>// js
data() {return {tableShow: true,}
}
method: {// 触发更新事件updateTable(){// 卸载this.tableShow= false// 建议加上 nextTick 微任务 // 否则在同一事件内同时将tableShow设置false和true有可能导致组件渲染失败this.$nextTick(function(){// 加载this.tableShow= true})},
}

2.使用组件中的 :key （推荐）

这个最简单实用，如果需要每次在当前父页面更新时重载CompTable这个子组件就可以用这个方法，每次父组件更新 :key 都会重新取值，而时间戳每次都是不同的，组件发现 :key发生变化就会重新渲染

// html 
<CompTable ref="CompTable" :key="new Date().getTime()"/>

起初我还担心如果把 new Date().getTime() 直接放到 :key 中，
会不会不生效，要不要传个变量给key，
然后像v-if一样手动改变变量的值，
后来发现完全不用，直接放上去就可以。

3. 使用 $forceUpdate()

对于数据更新 但ui没有更新的情况下可以使用this.$forceUpdate

迫使Vue实例重新渲染。
注意它仅仅影响实例本身和插入插槽内容的子组件，
而不是所有子组件。