$nextTick解决Vue组件卸载在加载合并的问题
张最棒 人气:0情况是这样的，父子组件都是复选框，点击父组件的复选框，子组件的复选框要显示并全选，取消复选框，子组件隐藏。子组件显隐我用的 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 },
开心的一天，有一种东西叫苦尽甘来，啊哈哈，昨天还在雨中导航，今天就有收获了
一定要带伞，因为天有不测风云，啊哈哈
也希望每个人在下雨的时候都有个人撑着伞在等你
加载全部内容