vue2源码学习——nextTick解析_vue2 nexttick 源码

Vue官方文档的解释是：

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

所以有时候改变状态之后无法立即获取更新后的视图，我们就需要通过Vue.nextTick(cb)或者vm.$nextTick(cb)方法，在回调中获取更新后的视图，举个例子：

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '未更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '已更新'
      console.log(this.$el.textContent) // => '未更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '已更新'
      })
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

// 源码目录/src/core/util/next-tick.js
import { noop } from 'shared/util'
import { handleError } from './error'
import { isIE, isIOS, isNative } from './env'

// 当前是否在使用微任务，标识符
export let isUsingMicroTask = false

// 回调函数队列
const callbacks = []
// 处理状态标识符
let pending = false

// 执行nextTick中注册的回调函数
function flushCallbacks () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

// 在2.5版本中，Vue使用宏任务队列，但这有一个隐性的问题，它的执行时机（状态改变）可能在页面“回流”之前，可能触发两次回流，同时也存在一个无法规避的问题。所以Vue之后优先使用微任务队。
// 异步执行回调函数，根据当前环境判断使用哪种方式
let timerFunc

// 异步任务的降级方案，优先使用微任务promise，其实MutationObserver，然后是setImmediate。最后不行就使用setTimeout宏任务
// 值得注意的是iOS9.3.3及以上版本的UIWebView中，MutationObserver触发几次后可能完全停止工作。
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  // 微任务
  timerFunc = () => {
    // 放入微任务队列当中
    p.then(flushCallbacks)
    // 解决ios当中的兼容性问题，有时候Promise.then虽然将任务放入微任务队列中，
    // 但是微任务队列不会执行，除非浏览器进行一些额外操作。比如执行一个定时器
    if (isIOS) setTimeout(noop)
  }
  // 使用微任务
  isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
  // 使用MutationObserver，实现微任务。部分环境不支持promise，比如PhantomJS、IOS7和Android4.4
  // 值得注意的是IE11 MutationObserver不可靠
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  // 利用文本节点，修改文本节点的内容，导致dom更新，触发MutationObserver事件
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // 技术上讲，它等于放入宏任务队列，但是比timeout好，因为其优先级更高
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  // 最后，使用setTimeout放入宏任务队列
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

// nexttick的核心
export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
  // 放入到回调函数队列
  callbacks.push(() => {
    // 如果有回调函数，就执行回调函数
    if (cb) {
      try {
        cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      // 没有回调函数，且当前环境支持promise的情况下，返回一个resolve（ctx）状态的promise的，供外部使用
      _resolve(ctx)
    }
  })
  // 如果在等待阶段，当前tick将回调任务放入异步队列中。微任务或者宏任务
  if (!pending) {
    // 将标识符置为true，下一tick不会进入，有任务执行完成后会变为false，在下下个tick中进入
    pending = true
    // 开始执行回调函数，将放入异步队列中
    timerFunc()
  }

  // 如果环境可以使用promise，就返回一个promise
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105