Vue组件重新渲染(组件重载)的3种实现方式

我们在开发过程中页面状态变化时，

有时会需要一部分组件重新渲染，

让这些组件里的生命周期重新走一遍

下面提供 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一样手动改变变量的值，

后来发现完全不用，直接放上去就可以。

缺点：

• 如果当前组件同级有input输入框就尴尬了
• 每次输入都会重载这个CompTable组件
• 如果页面有表单就只能用v-if的形式了

3.使用 $forceUpdate()

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

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

希望这对你有帮助！

关于 $nextTick，官网上的说法：

为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即 使用 Vue.nextTick(callback)。这样 回调函数将在 DOM 更新完成后被调用。

官网参考：深入响应式原理-异步更新队列

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。