一、什么是 Vue.nextTick()
关于 nextTick,其实官网上面讲的蛮明白的,详情请看:Vue.nextTick( [callback, context] )
语法
Vue.nextTick([callback, context])
参数
- {Function} [callback]:回调函数,不传时提供promise调用
- {Object} [context]:回调函数执行的上下文环境,不传默认是自动绑定到调用它的实例上。
用法
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
简单的理解是:当数据更新了,在 DOM 中渲染后,自动执行该函数。
举个栗子:
<template>
<div class="hello">
<div>
<button id="firstBtn"
@click="testClick()"
ref="firstBtn">
{{ testMsg }}
</button>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
testMsg: '未更新',
};
},
methods: {
testClick() {
// 多次改变数据
this.testMsg = '已更新';
this.testMsg = '再次更新';
this.testMsg = '再再次更新';
this.testMsg = '再再再次更新';
this.testMsg = '再再再再次更新';
this.testMsg = '最后更新';
// 使用 nextTick回调获取DOM数据,nextTick里面的代码会在DOM更新后执行
this.$nextTick(() => {
console.log('nextTick回调:', this.$refs.firstBtn.innerText); // => '最后更新'
});
// 也可以作为一个 Promise 使用, 即不传回调
this.$nextTick().then(() => {
console.log('nextTick作为Promise:', this.$refs.firstBtn.innerText); // => '最后更新'
});
// 想要立即使用更新后的DOM。这样不行,因为设置message后DOM还没有更新
console.log('直接获取:', this.$refs.firstBtn.innerText); // => '未更新'
console.log('啥也不干,就是玩。');
},
},
};
</script>
复制代码
点击按钮,打印出来的结果为:
直接获取: 未更新
啥也不干,就是玩。
nextTick回调: 最后更新
nextTick作为Promise: 最后更新
复制代码
从以上例子可以发现:
- 我们多次更改了testMsg的值,但最终只能拿到
this.testMsg = '最后更新'
; - 在更改之后直接获取DOM数据的时候,因为此时DOM还没有更新,所以只能拿到更新前的DOM数据
未更新
- 无论是在
nextTick
回调函数还是then函数中的方法,都会在当前方法内所有同步代码执行完毕之后再执行,然后就能拿到更新后的DOM数据了
这是什么原因呢?
原理
JS运行机制(Event Loop)
JS事件循环(Event Loop)
JS执行是单线程的,它是基于事件循环的。
- 所有同步任务都在主线程上执行,形成一个执行栈。
- 主线程之外,会存在一个任务队列,只要异步任务有了结果,就在任务队列中放置一个事件。
- 当执行栈中的所有同步任务执行完后,就会读取任务队列。那些对应的异步任务,会结束等待状态,进入执行栈。
- 主线程不断重复第三步。
这里主线程的执行过程就是一个tick,而所有的异步结果都是通过任务队列来调度。Event Loop 分为宏任务和微任务,无论是执行宏任务还是微任务,完成后都会进入到一下tick,并在两个tick之间进行UI渲染。
Vue更新策略
同样,Vue 是异步执行 DOM 更新的。更新过程如下:
- 一旦观察到数据变化,Vue 就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。
- 如果这个 watcher 被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和 DOM 操作。
- 而在下一个事件循环时,Vue 会清空队列,并进行必要的 DOM 更新。
所以,当你设置 this.testMsg = '再次更新';
时,DOM 并不会马上更新,即使你用一个for循环来动态改变数据100次,其实它只会应用最后一次改变。而在异步队列被清空后,也就是下一个事件循环开始时执行更新时才会进行必要的 DOM 更新。
因此,为了确保得到更新后的DOM,所以设置了 Vue.nextTick()
; 可以在数据变化之后立即使用 Vue.nextTick(callback)
,这样回调函数 callback
在 DOM 更新完成后就会调用。
二、Vue.nextTick() 应用场景
需要在视图更新之后,基于新的视图进行操作。
1. 初始化绑定或操作DOM
在 created()钩子函数执行的时候 DOM 其实并未进行任何渲染,同样mounted() 不会承诺所有的子组件也都一起被挂载。而此时进行 DOM 操作无异于徒劳,所以如果你希望等到整个视图都渲染完毕, 一定要将 DOM 操作的 js 代码放进 Vue.nextTick()
的回调函数中。
created() {
// 不使用this.$nextTick()方法会报错
that.$nextTick(() => {
that.$refs.firstBtn.innerHTML = "created 中更改了按钮内容"; //写入到 DOM 元素
});
}
复制代码
2. 获取数据更新的DOM
当项目中你想在改变 DOM 元素的数据后基于新的 DOM 做点什么,比如获取v-if控制的DOM节点。必须放进 Vue.nextTick()
的回调函数中.
<div id="app">
<p ref="myWidth" v-if="showMe">{{ message }}</p>
<button @click="getMyWidth">获取p元素宽度</button>
</div>
getMyWidth() {
this.showMe = true;
//this.message = this.$refs.myWidth.offsetWidth;
//报错 TypeError: this.$refs.myWidth is undefined
this.$nextTick(()=>{
//dom元素更新后执行,此时能拿到p元素的属性
this.message = this.$refs.myWidth.offsetWidth;
})
}
复制代码
3.第三方插件中使用
在使用某个第三方插件时 ,希望在 vue 生成的某些 DOM 动态发生变化时重新应用该插件,也会用到该方法,这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。比如使用 swiper 插件通过 ajax 请求图片后的滑动问题。
总结
路漫漫其修远兮,与诸君共勉。