项目中用到vue中的nextTick

项目中哪些场景会用到nextTick方法呢？

1、在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

2、在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

比如在项目中我们有一段这样子的代码：

<RadioGroup v-model="launcharea" @on-change="changeArea">

                <Radio label="ALL">

                <span>不限</span>

                </Radio>

                <Radio label="somearea">

                <span>选择地域</span>

                </Radio>

</RadioGroup>

需求要求在满足if条件下，点击选择地域时，radioBtn还在不限那里选中着，刚开始写的代码是：

if (this.blackListInfo.advertiserLabel.length === 0) {

        this.$Message.error('请至少选择一个广告主类型');

          this.launcharea = 'ALL'；

 }

这个时候运行代码发现，满足if条件时，错误提示弹出来了，但是单选按钮没有在不限那里，还是在选择地域那里，但是我们明明把this.launcharea = 'ALL'了，根据双向数据绑定，此刻单选按钮应该在不限，为什么此刻双向数据绑定没起作用呢？

我们点击选择地域时，vue内部get、set方法执行了一次，this.launcharea = 'somearea'，同时单选按钮选中选择地域，代码中this.launcharea = 'ALL'，数据更新会出发dom更新,vue内部get、set方法又执行了一次，这两次是异步的，为了确保this.launcharea = 'ALL'的数据改变引起的dom改变发生在最后，需要将其放在Vue.nextTick()的回调函数中。所以将项目中代码应该为如下：

if (this.blackListInfo.advertiserLabel.length === 0) {

        this.$Message.error('请至少选择一个广告主类型');

        this.$nextTick(() => {

          this.launcharea = 'ALL';

        });

 }

此时，在我们满足if条件下点击选择地域，先弹出提示消息，也看到单选按钮是选中不限的，而不是选择地域。