$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   },

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

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

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