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

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

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

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

然而并没有效果

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

怎么办呢？

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

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

这里$nextTick 使微任务

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

 

代码如下：

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

 

 

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

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

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