Vue $nextTick 使用场景

前言

虽然 $ nextTick是一个中级知识点。但只要你是一个vue开发者，你就必须得知道$nextTick的使用场景。不管是面试还是日常工作，你都用得到。

$nextTick的定义

$nextTick会在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

vue官方对$nextTick介绍

面试的时候如何回答什么是nextTick

nextTick是vue框架里面一个全局api。它是当前异步更新队列循环结束之后的回调函数。

vue框架源码中nextTick部分

  var callbacks = [];
  function nextTick (cb, ctx) {
    var _resolve;
    callbacks.push(function () {
      if (cb) {
        try {
          cb.call(ctx);
        } catch (e) {
          handleError(e, ctx, 'nextTick');
        }
      } else if (_resolve) {
        _resolve(ctx);
      }
    });
    if (!pending) {
      pending = true;
      timerFunc();
    }
    // $flow-disable-line
    if (!cb && typeof Promise !== 'undefined') {
      return new Promise(function (resolve) {
        _resolve = resolve;
      })
    }
  }
  //进入异步更新新队列时的回调函数
   function flushCallbacks () {
    pending = false;
    var copies = callbacks.slice(0);
    callbacks.length = 0;
    for (var i = 0; i < copies.length; i++) {
      copies[i]();
    }
  }

$nextTick实现原理

在浏览器支持 Promise.then、MutationObserver 和 setImmediate方法时使用这些方法，不支持则采用setTimeout(fn, 0)。

$nextTick的使用场景

在前文里我们已经知道了什么是$nextTick。现在要进入主题。究竟哪里适合使用 $ nextTick。

场景1

在 created 和 mounted 阶段，如果需要操作渲染后的视图，可以使用 nextTick 方法。

场景2

在希望所有子组件加载完成时进行某些操作时，可以采用

延展

mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

场景3

重新渲染元素时，想拿到元素的属性

原因

Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。