项目中哪些场景会用到 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 条件下点击选择地域, 先弹出提示消息, 也看到单选按钮是选中不限的, 而不是选择地域.
来源: http://www.jianshu.com/p/f2db9d4ebc95