Vue.nextTick 的原理和用途

原理

1. 异步说明

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

2. 事件循环说明

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

应用场景

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

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

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

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

具体原因在 Vue 的官方文档中详细解释：

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 更新完成后就会调用。

**深入理解**

https://github.com/vuejs/vue/blob/dev/src/core/util/next-tick.js (源码地址)

```JavaScript
  var nextTick = (function () {
    // 这里存放的是回调函数的队列
    var callbacks = [];
    var pending = false;
    var timerFunc;
    //这个函数就是DOM更新后需要执行的
    function nextTickHandler () {
      pending = false;
       //这里将回调函数copy给copies
      var copies = callbacks.slice(0);
      callbacks.length = 0;
      //进行循环执行回调函数的队列
      for (var i = 0; i < copies.length; i++) {
        copies[i]();
      }
  }
})()
```

Vue 用了三个方法来执行`nextTickHandler`函数，分别是：

- `Promise`

```JavaScript
//当浏览器支持Promise的时候就是用Promise
p.then(nextTickHandler).catch(logError);
```

- `MutationObserver`

```JavaScript
//当浏览器支持MutationObserver的时候就是用MutationObserver
var observer = new MutationObserver(nextTickHandler);
  var textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {
    characterData: true
  });
  timerFunc = function () {
    counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
```

- `setTimeout`

```JavaScript
//当以上都不支持的时候就用setTimeout
 setTimeout(nextTickHandler, 0);
```

那么 Vue.nextTick([callback, context])的第二个参数是什么呢?来看下面的代码。

```JavaScript
return function queueNextTick (cb, ctx) {
  var _resolve;
  callbacks.push(function () {
  //看这里，其实是可以给cb指定一个对象环境，来改变cb中this的指向
    if (cb) { cb.call(ctx); }
    if (_resolve) { _resolve(ctx); }
  });
  if (!pending) {
    pending = true;
    timerFunc();
  }
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(function (resolve) {
      _resolve = resolve;
    })
  }
}
```

这样写就报错了:

```JavaScript
Vue.nextTick(()=>{
  this.text()
}, { text(){
  console.log('铁蛋儿')
  }
})
```

源码中使用的是`if (cb) { cb.call(ctx) }` 所以不能使用箭头函数，箭头函数的`this`是固定的，是不可用`apply`,`call`,`bind`来改变的。改成这样：

```JavaScript
Vue.nextTick(function () {
  this.text()
}, {
  text(){
    console.log('铁蛋儿')
  }
})
```