Vue.nextTick 的作用以及大概实现原理

小草莓蹦蹦跳

已于 2023-11-06 16:40:17 修改

阅读量6k

点赞数 5

分类专栏： Vue1.x和Vue2.x 每日专栏文章标签： vue.js javascript 前端

于 2020-07-24 09:43:27 首次发布

本文链接：https://blog.csdn.net/qq_38290251/article/details/107550899

版权

每日专栏同时被 2 个专栏收录

226 篇文章

订阅专栏

Vue1.x和Vue2.x

81 篇文章

订阅专栏

1、总结版

关键点：

确保我们操作的是更新后的 DOM; 这样做可以避免频繁的 DOM 操作，提高性能

背景：

Vue.js 采用异步更新机制来提高渲染效率，当我们修改数据时，Vue 不会立即更新 DOM，而是将 DOM 更新操作放到一个异步队列中，等到下一次事件循环时再执行。这样做可以避免频繁的 DOM 操作，提高性能。

问题：

但是，由于 Vue 的异步更新机制，当我们修改数据后，如果想要立即获取更新后的 DOM，可能会出现获取到的是更新前的 DOM 的情况。这时就需要使用 Vue.nextTick() 方法

原理：

Vue.nextTick() 方法的实现原理是基于浏览器的异步任务队列，采用微任务优先的方式。

当我们修改数据时，Vue 会将 DOM 更新操作放到一个异步任务队列中，等待下一次事件循环时执行。而 Vue.nextTick() 方法则是将一个回调函数推入到异步任务队列中，等待 DOM 更新完成后执行。

具体实现方式有以下几种:
① 在 Vue2.x 中，如果浏览器支持 Promise，则会优先使用；

② 如果不支持 Promise，则会使用原生的 setTimeout 方法模拟异步操作；

③ 如果浏览器支持 MutationObserver，Vue 会使用 MutationObserver 监听 DOM 更新，并在 DOM 更新完成后执行回调函数。

④ 使用 setlmmediate: 在 lE 中，setlmmediate 方法可以用来延迟异步执行任务。在 Vue2.x 中，如果浏览器支持 setlmmediate，则会优先使用 setlmmediate，否则会使用 setTimeout。

Vue.nextTick() 可以将回调函数推入到异步队列中，在 DOM 更新完成后执行。这样就可以确保我们操作的是更新后的 DOM，而不是更新前的 DOM。比如在某些情况下需要获取某个元素的尺寸、位置等属性时，如果不使用 Vue.nextTick()，可能会获取到错误的结果。

因为 Vue 中视图更新是异步的，而 Vue.nextTick() 方法可以让我们在下次 DOM 更新循环结束后执行我们的回调函数，确保我们操作的是更新后的DOM。

总结：

因为 Vue中视图更新是异步的，而使用 Vue.nextTick() 方法可以保证我们定义的逻辑在DOM更新之后执行，也就是确保我们操作的是更新后的DOM。

它的实现原理是利用浏览器的异步任务队列，它会将用户定义的回调函数推入到异步队列中，在 DOM 更新完成后执行。Vue底层会根据浏览器的支持情况选择合适的异步任务方法。

源码中定义了一个异步逻辑函数timeFunc()，采用优雅降级的方式：

先判断浏览器是否支持 Promise，如果支持则优先使用 Promise.then() 方法来触发执行回调函数；
否则，判断是否支持 MutationObserver，支持的话就会实例化一个观察者对象，观察文本节点发生变化时，执行回调函数；
如果都不支持，则看下当前是否是 IE, 如果是就会采用 setlmmediate 来延迟异步执行任务；
如果再不支持，会利用 setTimeout 设置延时为0。

2、转载版

vue核心面试题（nextTick实现原理）_nexttick面试_王三六的博客-CSDN博客

一、示例

先来一个示例，了解下关于Vue中的DOM更新以及nextTick的作用。

<div class="app">
  <div ref="msgDiv">{{ msg }}</div>
  <div v-if="msg1">Message got outside $nextTick: {{ msg1 }}</div>
  <div v-if="msg2">Message got inside $nextTick: {{ msg2 }}</div>
  <div v-if="msg3">Message got outside $nextTick: {{ msg3 }}</div>
  <button @click="changeMsg">改变 Msg </button>
</div>

new Vue({
  el: '.app',
  data: {
    msg: 'Hello Vue.',
    msg1: '',
    msg2: '',
    msg3: ''
  },
  methods: {
    changeMsg() {
      this.msg = "Hello world."
      this.msg1 = this.$refs.msgDiv.innerHTML
      this.$nextTick(() => {
        this.msg2 = this.$refs.msgDiv.innerHTML
      })
      this.msg3 = this.$refs.msgDiv.innerHTML
    }
  }
})

点击前：

点击后：

从图中可以得知：msg1 和 msg3 显示的内容还是变换之前的，而 msg2 显示的内容是变换之后的。

其根本原因是因为Vue中DOM更新是异步的。

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

二、应用场景

下面了解下 nextTick 的主要应用的场景及原因。

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

在created()钩子函数执行的时候 DOM 其实并未进行任何渲染，而此时进行 DOM 操作无异于徒劳，所以此处一定要将 DOM 操作的 js 代码放进 Vue.nextTick()的回调函数中。

与之对应的就是 mounted() 钩子函数，因为该钩子函数执行时所有的 DOM 挂载和渲染都已完成，此时在该钩子函数中进行任何 DOM 操作都不会有问题。

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

Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。

然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel，如果执行环境不支持，会采用 setTimeout(fn, 0)代替。

例如，当你设置 vm.someData = 'new value'，该组件不会立即重新渲染。当刷新队列时，组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程，但是如果你想在 DOM 状态更新后做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

三、`nextTick`源码浅析

作用

Vue.nextTick用于延迟执行一段代码，它接受2个参数（回调函数和执行回调函数的上下文环境），如果没有提供回调函数，那么将返回promise对象。

源码

var nextTick = (function () {
        var callbacks = []; // 存储需要触发的回调函数
        var pending = false; // 是否正在等待的标识(false:允许触发在下次事件循环触发callbacks中的回调, true: 已经触发过,需要等到下次事件循环)
        var timerFunc; // 设置在下次事件循环触发callbacks的 触发函数

        //处理callbacks的函数
        function nextTickHandler () {
            pending = false;// 可以触发timeFunc
            var copies = callbacks.slice(0);//复制callback
            callbacks.length = 0;//清空callback
            for (var i = 0; i < copies.length; i++) {
                copies[i]();//触发callback回调函数
            }
        }

        //如果支持Promise,使用Promise实现
        if (typeof Promise !== 'undefined' && isNative(Promise)) {
            var p = Promise.resolve();
            var logError = function (err) { console.error(err); };
            timerFunc = function () {
                p.then(nextTickHandler).catch(logError);
                // ios的webview下,需要强制刷新队列,执行上面的回调函数
                if (isIOS) { setTimeout(noop); }
            };

            //如果Promise不支持,但是支持MutationObserver(h5新特性,异步,当dom变动是触发,注意是所有的dom都改变结束后触发)
        } else if (typeof MutationObserver !== 'undefined' && (
                isNative(MutationObserver) ||
                // PhantomJS and iOS 7.x
                MutationObserver.toString() === '[object MutationObserverConstructor]'
            )) {
            // use MutationObserver where native Promise is not available,
            // e.g. PhantomJS IE11, iOS7, Android 4.4
            var counter = 1;
            var observer = new MutationObserver(nextTickHandler);
            //创建一个textnode dom节点,并让MutationObserver 监视这个节点;而 timeFunc正是改变这个dom节点的触发函数
            var textNode = document.createTextNode(String(counter));
            observer.observe(textNode, {
                characterData: true
            });
            timerFunc = function () {
                counter = (counter + 1) % 2;
                textNode.data = String(counter);
            };
        } else {// 上面两种不支持的话,就使用setTimeout

            timerFunc = function () {
                setTimeout(nextTickHandler, 0);
            };
        }
        //nextTick接受的函数, 参数1:回调函数  参数2:回调函数的执行上下文
        return function queueNextTick (cb, ctx) {
            var _resolve;//用于接受触发 promise.then中回调的函数
            //向回调数据中pushcallback
            callbacks.push(function () {
                //如果有回调函数,执行回调函数
                if (cb) { cb.call(ctx); }
                if (_resolve) { _resolve(ctx); }//触发promise的then回调
            });
            if (!pending) {//是否执行刷新callback队列
                pending = true;
                timerFunc();
            }
            //如果没有传递回调函数,并且当前浏览器支持promise,使用promise实现
            if (!cb && typeof Promise !== 'undefined') {
                return new Promise(function (resolve) {
                    _resolve = resolve;
                })
            }
        }
    })();

首先，先了解nextTick中定义的三个重要变量。

callbacks 用来存储所有需要执行的回调函数
pending 用来标志是否正在执行回调函数
timerFunc 用来触发执行回调函数

接下来，了解nextTickHandler()函数。

function nextTickHandler () {
    pending = false
    const copies = callbacks.slice(0)
    callbacks.length = 0
    for (let i = 0; i < copies.length; i++) {
      copies[i]()
    }
  }

这个函数用来执行callbacks里存储的所有回调函数。

接下来是将触发方式赋值给timerFunc。

先判断是否原生支持 promise，如果支持，则利用promise来触发执行回调函数；
否则，如果支持 MutationObserver，则实例化一个观察者对象，观察文本节点发生变化时，触发执行所有回调函数。
如果都不支持，则利用setTimeout设置延时为0。

最后是queueNextTick函数。因为nextTick是一个即时函数，所以queueNextTick函数是返回的函数，接受用户传入的参数，用来往callbacks里存入回调函数。

上图是整个执行流程，关键在于timeFunc()，该函数起到延迟执行的作用。

从上面的介绍，可以得知timeFunc()一共有三种实现方式。

Promise
MutationObserver
setTimeout

其中Promise和setTimeout很好理解，是一个异步任务，会在同步任务以及更新DOM的异步任务之后回调具体函数。

下面着重介绍一下 MutationObserver。

MutationObserver 是 HTML5 中的新 API，是个用来监视 DOM 变动的接口。他能监听一个DOM对象上发生的子节点删除、属性修改、文本内容修改等等。
调用过程很简单，但是有点不太寻常：你需要先给他绑回调：

var mo = new MutationObserver(callback)

通过给 MutationObserver 的构造函数传入一个回调，能得到一个 MutationObserver 实例，这个回调就会在 MutationObserver 实例监听到变动时触发。

这个时候你只是给 MutationObserver 实例绑定好了回调，他具体监听哪个DOM、监听节点删除还是监听属性修改，还没有设置。而调用他的 observer 方法就可以完成这一步:

var domTarget = 你想要监听的dom节点
mo.observe(domTarget, {
      characterData: true // 说明监听文本内容的修改。
})

在 nextTick 中 MutationObserver 的作用就如上图所示。

在监听到 DOM 更新后，调用回调函数。其实使用 MutationObserver 的原因就是 nextTick 想要一个异步API，用来在当前的同步代码执行完毕后，执行我想执行的异步回调，包括 Promise 和 setTimeout 都是基于这个原因。其中深入还涉及到 microtask 等内容，暂时不理解，就不深入介绍了。