Vue nextTick使用场景及实现原理

nextTick是前端面试中vue框架中必考的部分，一定要掌握。它主要是处理我们再变更完数据以后，无法立刻拿到最新的DOM节点对象的问题。我们可以这样理解：vue执行完渲染后会执行this.nextTick()里面的callback函数。

 

使用场景

我们来看一个实际的vue组件

<template>
  <div class="hello">
    <p ref="p_ref">
      当前姓名:<b>{{ name }}</b>
    </p>
    <button @click="changeName">改变名称</button>
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      name: "张三",
    };
  },
  methods: {
    changeName() {
      this.name = "李四";
      console.log(this.$refs["p_ref"].innerHTML);
    },
  },
};
</script>

在这个组件中，我们定义了一个name属性和一个changeName方法，并给展示name属性绑定了名为“p_ref”的ref引用，这样我们就可以对该DOM节点进行操作。我们在changeName方法中，做了两件事情：首先我们改变了name属性的值，然后我们使用vue的this.$refs方法拿到了真实的dom节点，并打印了dom节点的内容，控制台打印的内容如下：

当前姓名:<b>张三</b>

 很显然这不是我们想要的数据，因为我们改变了组件属性中的name属性，这时候打印的名称应该是李四才对。 我们来用this.nextTick()方法来改写这个组件：

<template>
  <div class="hello">
    <p ref="p_ref">
      当前姓名:<b>{{ name }}</b>
    </p>
    <button @click="changeName">改变名称</button>
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      name: "张三",
    };
  },
  methods: {
    changeName() {
      this.name = "李四";
      this.$nextTick(() => {
        console.log(this.$refs["p_ref"].innerHTML);
      });
    },
  },
};
</script>

 我们做的事情很简单，我们使用了this.$nextTick()方法，并在函数中定义了一个箭头函数，然后在箭头函数里面打印p标签里面的内容，结果可以猜到：

 

当前姓名:<b>李四</b>

 

这就是this.$nextTick()的作用，帮助我们在改变组件中属性以后，立刻拿到渲染以后的dom节点对象，那它是怎么实现这一功能的呢？

实现原理

首先vue底层会定义一个callback数组来模拟事件队列，通过cb参数传入的函数会经过一个函数包装，在这个包装过程中会执行传入的函数，并处理执行失败的情况以及cb参数不存在的情况，包装完成后会添加到callbacks数组中；然后调用timerFunc函数，该函数就是用各种异步执行的方法调用flushCallbacks函数，在flushCallbacks函数中，将拷贝callbacks中的每一个函数并执行。vue会定义一个变量pending来保证一个事件循环中只调用一次timerFunc函数。 在这过程中，最关键的是如何定义timerFunc函数，因为在各个浏览器下对创建异步执行函数的方法各不相同，下面来介绍主要的方法。

Promise创建异步执行函数

判断方式为：执行typeof Promise 如果返回的是:function则表示支持promise。创建代码如下：

if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {   
  //timerFunc函数就是用各种异步执行的方法调用flushCallbacks函数。
    p.then(flushCallbacks)
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} 

MutationObserve 创建异步执行函数 

if (!isIE && typeof MutationObserver !== 'undefined' &&
    (isNative(MutationObserver) ||
    MutationObserver.toString() === '[object MutationObserverConstructor]')
) {
    var counter = 1;
    var observer = new MutationObserver(flushCallbacks);
    var textNode = document.createTextNode(String(counter));
    observer.observe(textNode, {
        characterData: true
    });
    timerFunc = function() {
        counter = (counter + 1) % 2;
        textNode.data = String(counter);
    };
    isUsingMicroTask = true;
}

创建并返回一个新的MutationObserver，并吧flushCallbacks作为回调传入，在指定DOM发生变化后会执行传入的函数。

setImmediate 创建异步执行函数

if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} 

setImmediate仅支持IE10以上的浏览器

setTimeout 创建异步执行函数

 

timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  }

兼容IE10一下的浏览器，由于是宏任务因此比较消耗资源。