$nextTick解决Vue组件卸载在加载合并的问题

情况是这样的,父子组件都是复选框,点击父组件的复选框,子组件的复选框要显示并全选,取消复选框,子组件隐藏。子组件显隐我用的 v-if ,使用created钩子函数来使子组件处于全选状态。

但是出现的问题就是点击父组件的第一个复选框,在点击第二个复选框,子组件并不会触发v-if,只是更新了数据。倒是没有出发子组件的created钩子函数。

于是在父组件里手动卸载组件并创建组件,第7行和第14行

然而并没有效果

因为Vue会合并对重复数据的处理,并没有卸载组件,而是一直使true的状态

怎么办呢?

使用$nextTick(渲染更新完成的回调)

在第7行卸载后会渲染一个,我在卸载后在创建就不会合并了

这里$nextTick 使微任务

如果使用setTimeout会发生抖动,由于使宏任务,会等待所有微任务执行完成后才会执行,虽然时间使0,但是还是有时长,卸载在创建中间出现消失在显示的情况

 

代码如下:

 1    /**
 2      * 当选中状态发生变化(是否是选中状态,子组件的数据)
 3      */
 4     handleCheckedItemChange(isChecked, item){
 5       console.log(isChecked,item, "=============");
 6       // 卸载组件
 7       this.isShowDetail = false;
 8       this.sonDetail = item.sort ? item.sort : null
 9       this.isSelected = isChecked || false
10       // 因为vue会将重复的指令合并成一个,所以都没走卸载组件,这里使用$nextTick在渲染后进行(组件卸载后)在重新创建组件,
11       // 因为$nextTick 是微任务,而使用setTimeout是宏任务,时间过长,使窗口发生抖动,因为销毁在创建中间消失一下
12       this.$nextTick(() => {
13         // 创建子组件
14         this.isShowDetail = true
15       });
16     }
17   },

 

 

开心的一天,有一种东西叫苦尽甘来,啊哈哈,昨天还在雨中导航,今天就有收获了

一定要带伞,因为天有不测风云,啊哈哈

也希望每个人在下雨的时候都有个人撑着伞在等你

 

Tags: