Vue.nextTick,了解一下?

6,260 阅读12分钟

nextTick的定义

Vue.nextTick([callback, context])

在DOM更新后做事情有两种方案:

  1. 通过MO对象,监听DOM变化,在其cb中执行
  2. 通过控制任务队列来执行

VUE为了更好的性能,不是每修改一次DOM就更新一次DOM。而是异步更新DOM。

所以,VUE的渲染时机是在每个任务队列执行完成之间。就是每次的任务队列中的修改数据或者修改DOM的操作的宏任务或者微任务中。

任务队列1执行完成-> 更新DOM -> 任务队列2执行完成 -> 更新DOM....

实现关键点

  • 要拿到更新后有DOM,就必须把nextTick中的cb放到下一个任务队列中(宏任务微任务都行)
  • 微任务总是在宏任务执行前执行。所以,微任务更适合nextTick的场景。把nextTick回调中的脚本放到一个promise.then()中,就能保证是DOM更新后执行。
  • VUE降级策略(因为API的兼容性问题),(promise -> setTimeout)

为什么用Vue.nextTick()

首先来了解一下JS的运行机制。

  • JS运行机制(Event Loop)
  • JS执行是单线程的,它是基于事件循环的。

事件循环

  • 所有同步任务都在主线程上执行,形成一个执行栈。
  • 主线程之外,会存在一个任务队列,只要异步任务有了结果,就在任务队列中放置一个事件。
  • 当执行栈中的所有同步任务执行完后,就会读取任务队列。那些对应的异步任务,会结束等待状态,进入执行栈。
  • 主线程不断重复第三步。

这里主线程的执行过程就是一个tick,而所有的异步结果都是通过任务队列来调度。Event Loop 分为宏任务和微任务,无论是执行宏任务还是微任务,完成后都会进入到一下tick,并在两个tick之间进行UI渲染。

由于Vue DOM更新是异步执行的,即修改数据时,视图不会立即更新,而是会监听数据变化,并缓存在同一事件循环中,等同一数据循环中的所有数据变化完成之后,再统一进行视图更新。为了确保得到更新后的DOM,所以设置了 Vue.nextTick()方法。

它的作用:

使用Vue.nextTick()是为了可以获取更新后的DOM 。 触发时机:在同一事件循环中的数据变化后,DOM完成更新,立即执行Vue.nextTick()的回调。

同一事件循环中的代码执行完毕 -> DOM 更新 -> nextTick callback触发

nextTick使用

  • 通过传入回调
  • 通过.then()

//改变数据
vm.message = 'changed'
//想要立即使用更新后的DOM。这样不行,因为设置message后DOM还没有更新
console.log(vm.$el.textContent) // 并不会得到'changed'
//这样可以,nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
    // DOM 更新了
    //可以得到'changed'
    console.log(vm.$el.textContent)
})

// 作为一个 Promise 使用 即不传回调
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

应用场景:

需要在视图更新之后,基于新的视图进行操作。

  • 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。 原因:是created()钩子函数执行时DOM其实并未进行渲染。

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

原因:Vue异步执行DOM更新,只要观察到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变,如果同一个watcher被多次触发,只会被推入到队列中一次。

版本分析

  • 2.6 版本优先使用 microtask 作为异步延迟包装器,且写法相对简单。
  • 2.5 版本中,nextTick 的实现是 microTimerFunc、macroTimerFunc 组合实现的,延迟调用优先级是:Promise > setImmediate > MessageChannel > setTimeout,具体见源码。

其他应用场景

  1. 点击按钮显示原本以 v-show = false 隐藏起来的输入框,并获取焦点。
showsou(){
  this.showit = true //修改 v-show
  document.getElementById("keywords").focus()  //在第一个 tick 里,获取不到输入框,自然也获取不到焦点
}

修改为:

showsou(){
  this.showit = true
  this.$nextTick(function () {
    // DOM 更新了
    document.getElementById("keywords").focus()
  })
}
  1. 点击获取元素宽度。
<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;
  })
}
showsou(){
  this.showit = true
  this.$nextTick(function () {
    // DOM 更新了
    document.getElementById("keywords").focus()
  })
}

源码浅析

nextTick 的实现单独有一个JS文件来维护它,在src/core/util/next-tick.js中 nextTick 源码主要分为两块:能力检测和根据能力检测以不同方式执行回调队列

能力检测

由于宏任务耗费的时间是大于微任务的,所以在浏览器支持的情况下,优先使用微任务。如果浏览器不支持微任务,再使用宏任务。

// 空函数,可用作函数占位符
import { noop } from 'shared/util' 

 // 错误处理函数
import { handleError } from './error'

 // 是否是IE、IOS、内置函数
import { isIE, isIOS, isNative } from './env'

// 使用 MicroTask 的标识符,这里是因为火狐在<=53时 无法触发微任务,在modules/events.js文件中引用进行安全排除
export let isUsingMicroTask = false 

 // 用来存储所有需要执行的回调函数
const callbacks = []

// 用来标志是否正在执行回调函数
let pending = false 

// 对callbacks进行遍历,然后执行相应的回调函数
function flushCallbacks () {
    pending = false
    // 这里拷贝的原因是:
    // 有的cb 执行过程中又会往callbacks中加入内容
    // 比如 $nextTick的回调函数里还有$nextTick
    // 后者的应该放到下一轮的nextTick 中执行
    // 所以拷贝一份当前的,遍历执行完当前的即可,避免无休止的执行下去
    const copies = callbcks.slice(0)
    callbacks.length = 0
    for(let i = 0; i < copies.length; i++) {
        copies[i]()
    }
}

let timerFunc // 异步执行函数 用于异步延迟调用 flushCallbacks 函数

// 在2.5中,我们使用(宏)任务(与微任务结合使用)。
// 然而,当状态在重新绘制之前发生变化时,就会出现一些微妙的问题
// (例如#6813,out-in转换)。
// 同样,在事件处理程序中使用(宏)任务会导致一些奇怪的行为
// 因此,我们现在再次在任何地方使用微任务。
// 优先使用 Promise
if(typeof Promise !== 'undefined' && isNative(Promise)) {
    const p = Promise.resolve()
    timerFunc = () => {
        p.then(flushCallbacks)
        
        // IOS 的UIWebView, Promise.then 回调被推入 microTask 队列,但是队列可能不会如期执行
        // 因此,添加一个空计时器强制执行 microTask
        if(isIOS) setTimeout(noop)
    }
    isUsingMicroTask = true
} else if(!isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) || MutationObserver.toString === '[object MutationObserverConstructor]')) {
    // 当 原生Promise 不可用时,使用 原生MutationObserver
    // e.g. PhantomJS, iOS7, Android 4.4
 
    let counter = 1
    // 创建MO实例,监听到DOM变动后会执行回调flushCallbacks
    const observer = new MutationObserver(flushCallbacks)
    const textNode = document.createTextNode(String(counter))
    observer.observe(textNode, {
        characterData: true // 设置true 表示观察目标的改变
    })
    
    // 每次执行timerFunc 都会让文本节点的内容在 0/1之间切换
    // 切换之后将新值复制到 MO 观测的文本节点上
    // 节点内容变化会触发回调
    timerFunc = () => {
        counter = (counter + 1) % 2
        textNode.data = String(counter) // 触发回调
    }
    isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
    timerFunc = () => {
        setImmediate(flushCallbacks)
    }
} else {
    timerFunc = () => {
        setTimeout(flushCallbacks, 0)
    }
}

延迟调用优先级如下:

Promise > MutationObserver > setImmediate > setTimeout

参考

Vue 数据修改代码分析:

  • 直接修改Vue,data中的数据,到更新到DOM上发生的事情
  • nextTick做了什么?

假设当前的模板代码为

<div id="a">{{a}}</div>

这时我们在mounted钩子里写下如下的代码

this.a = 'a';
this.$nextTick(function(){
	console.log($('#a')[0].textContent);
})

在一次task代码中,数据可能被多次修改。而我们不能在每次修改时都立马通知watcher去更新dom,替代的做法是将watcher加入到更新数组中。等到task代码执行完毕后(即所有同步代码执行完毕),则代表这一轮的数据修改已经结束。这时候我们可以去触发watcher的更新操作,于是无论之前task代码修改了多少次,最终我们只会更新DOM一次。

nextTick的重点在于将flushBatcherQueue这步遍历watcher的操作放在microtask中执行,至于使用MO或者Promise.then都无所谓。在这两者都不能很好兼容的环境下会被迫使用setTimeout来代替。但setTimeout是将回调函数放在macrotask队列,而浏览器在清理完microtask队列时会触发ui rendering,这样setTimeout就会浪费了它之前的浏览器ui rendering机会。(即至少要两次ui rendering才能把更新后的DOM渲染出来)

Vue的DOM更新时机设定

每次event loop的最后,会有一个UI render步骤,也就是更新DOM

for(let i=0; i<100; i++){
    dom.style.left = i + 'px';
}

浏览器会进行100次DOM更新吗?显然不是的,这样太耗性能了。事实上,这100次for循环同属一个task,浏览器只在该task执行完后进行一次DOM更新。

那我们的思路就来了:只要让nextTick里的代码放在UI render步骤后面执行,岂不就能访问到更新后的DOM了?

vue就是这样的思路,并不是用MO进行DOM变动监听,而是用队列控制的方式达到目的。那么vue又是如何做到队列控制的呢?我们可以很自然的想到setTimeout,把nextTick要执行的代码当作下一个task放入队列末尾。

然而事情却没这么简单,vue的队列控制是经过了深思熟虑的(也经过了多次改动)。 ,macrotask总要等到microtask都执行完后才能执行,microtask有着更高的优先级。

microtask的这一特性,简直是做队列控制的最佳选择啊!vue进行DOM更新内部也是调用nextTick来做异步队列控制。而当我们自己调用nextTick的时候,它就在更新DOM的那个microtask后追加了我们自己的回调函数,从而确保我们的代码在DOM更新后执行,同时也避免了setTimeout可能存在的多次执行问题。

常见的microtask有:Promise、MutationObserver、Object.observe(废弃),以及nodejs中的process.nextTick.

咦?好像看到了MutationObserver,难道说vue用MO是想利用它的microtask特性,而不是想做DOM监听?对喽,就是这样的。核心是microtask,用不用MO都行的。事实上,vue在2.5版本中已经删去了MO相关的代码,因为它是HTML5新增的特性,在iOS上尚有bug。

那么最优的microtask策略就是Promise了,而令人尴尬的是,Promise是ES6新增的东西,也存在兼容问题呀~ 所以vue就面临一个降级策略。 ####vue的降级策略 上面我们讲到了,队列控制的最佳选择是microtask,而microtask的最佳选择是Promise.但如果当前环境不支持Promise,vue就不得不降级为macrotask来做队列控制了。

macrotask有哪些可选的方案呢?前面提到了setTimeout是一种,但它不是理想的方案。因为setTimeout执行的最小时间间隔是约4ms的样子,略微有点延迟。还有其他的方案吗? 在vue2.5的源码中,macrotask降级的方案依次是:setImmediate、MessageChannel、setTimeout.

setImmediate是最理想的方案了,可惜的是只有IE和nodejs支持。

MessageChannel的onmessage回调也是microtask,但也是个新API,面临兼容性的尴尬...

所以最后的兜底方案就是setTimeout了,尽管它有执行延迟,可能造成多次渲染,算是没有办法的办法了。

小总结

以上就是vue的nextTick方法的实现原理总结一下就是:

  1. vue用异步队列的方式来控制DOM更新和nextTick回调先后执行
  2. microtask因为其高优先级特性,能确保队列中的微任务在一次事件循环前被执行完毕
  3. 因为兼容性问题,vue不得不做了microtask向macrotask的降级方案

总结:

  • nextTick,在任务队列加入一个微任务,或者宏任务。(优先微任务promise)
  • nextTick,,vue就是这样的思路,并不是用MO进行DOM变动监听,而是用队列控制的方式达到目的。那么vue又是如何做到队列控制的呢?我们可以很自然的想到setTimeout,把nextTick要执行的代码当作下一个task放入队列末尾。后续还有很多点
  • 队列控制的最佳选择是microtask,而microtask的最佳选择是Promise
  • Vue异步执行DOM更新
  • Vue只要观察到(劫持的数据)变化,Vue将开启一个队列,用来存放同一个事件循环中,发生的数据改变。
  • nextTick其实是通过任务队列的机制,来做到DOM更新。
  • IOS中,promise.then的回调不能如期执行,添加一个空计时器强制执行 microTask
  • Vue的渲染是在在两个tick之间进行UI渲染
  • 改变数据->开启队列(存放所有的数据改变)->通知watcher->按照事件循环的机制在两个tick之间更新DOM
  • 事件循环(主线程不断重复第三步)
  1. 同步任务都在主线程上执行,(形成执行栈)->
  2. 同步任务执行完成之后,执行(任务队列中)异步任务->
  3. 先执行微任务再执行宏任务

Vue中,this.a="a",数据被修改,简易版流程:

  1. 通过defineproperty的钩子set,通知所有订阅a数据的watcher,watcher收到通知,将数据修改放到更新数组(任务队列)中,主线程同步任务执行完成后,执行异步任务,来更新DOM。(vue中dom的更新是异步的)。

这样会触发MO将其回调函数加入到microtask队列中

  1. MO对象检测到DOM更新,不直接调用回调,而是把回调放入到微任务中,等微任务执行完成之后,来做更新DOM后的事情(nextTick中的脚本开始执行)。
再细化流程(VUE没有使用MO对象,所以此流程需要调整6,7,8,9,10步)
  1. a被修改
  2. 数据监听到了a被修改
  3. 通知订阅了a 数据的watcher。
  4. watcher收到通知,把该watcher放到更新数组中。等待更新
  5. 事件循环的两个tick之间更新DOM
  6. MO对象监测到DOM被修改了
  7. 将他的回调放到微任务队列中,等待执行。
  8. 是否使用了nextTick?
  9. 如果是: nextTick会将微任务转成同步任务执行。
  10. 如果不是:则按照正常的事件循环去更新DOM

以上流程的 6,7,8,9,10需要修改为:

  1. DOM渲染完成后,将开始执行下一个任务队列
  2. 调整这个任务队列,把nextTick中的cb放到这个任务队列中执行即可
  3. 任务队列-降级策略(先微任务,后宏任务)