关于动态组件的一个小小的注意点:内存里的数据需要手动回收

通过动态组件加载进来的页面,内存是不会自动回收的,影响性能。

<el-dialog class="childPage" title="" :visible.sync="dialogVisible" width="100%" height="100%">
	<component v-bind:is="dialogPage"></component>
</el-dialog>

动态组件切换时,子组件里面数据不会主动回收。所以要在关闭该页面的时候回收数据

  • 举个例子:
// 子组件数据需要主动回收,关闭页面数据不会消失
mounted() {
    
    
	testTimer = setInterval(() => {
    
    
	 	testNum +=1;
	    console.log(testNum);
	}, 1000);
}

在这里插入图片描述

解决方案:当组件切换时,主动回收数据。至于监听dialog页面关闭,请参考vuex 动态监听数据

猜你喜欢

转载自blog.csdn.net/weixin_37064409/article/details/119344161