Vue源码解析(nextTick实现原理&变化侦测注意事项&变化侦测API实现)

HuskyYellow
465 阅读7分钟

nextTick实现原理

在使用Vue.js开发的时候，如果我们要根据数据状态操作正确的DOM，那么我们一定和nextTick()方法打过交道，它是Vue.js中一个比较核心的一个方法，在这一章节中我们来介绍Vue.js中nextTick是如何实现的。

异步知识

由于nextTick涉及到许多与异步相关联的知识，因此为了降低学习难度，我们先来介绍这些异步知识。

Event Loop

我们都知道JavaScript是单线程的，它是基于Event Loop事件循环来执行的，Event Loop在执行的时候遵循一定的规则：所有同步任务都在主线程中执行，形成一个执行栈，所有异步任务，都会被暂时放入一个任务队列中，当所有同步任务执行完毕时，会读取这个任务队列让其进入执行栈，开始执行。以上介绍属于一次执行机制，主线程不断重复这个过程就形成了Event Loop事件循环。

以上是对Event Loop的大体介绍，但在Event Loop执行的时候，还有一些细节需要我们去掌握。

我们在派发更新章节提到过tick，那么什么是tick？tick就是主线程的一次执行过程。所有异步任务都是通过任务队列来调度的，任务队列中存放的是一个个任务(task)，而这一个个task按照规范，又分为macro task宏任务和micro task微任务。macro task和micro task在执行的时候存在一个微妙的关系：每个macro task执行结束后，会清空所有的micro task。

在浏览器环境下，macro task和micro task对应如下：

  • macro task宏任务：MessageChannel、postMessage、setImmediate和setTimeout。
  • micro task微任务：Promise.then和MutationObsever。

Event Loop

MutationObserver

在MDN文档 (opens new window)中，我们可以看到MutationObserver的详细用法，它不是很复杂，它的作用是：创建并返回一个新的 MutationObserver实例，它会在指定的DOM发生变化时被调用。

我们按照文档介绍，来撰写一个例子：

const callback = () => {
  console.log('text node data change')
}
const observer = new MutationObserver(callback)
let count = 1
const textNode = document.createTextNode(count)
observer.observe(textNode, {
  characterData: true
})

function func () {
  count++
  textNode.data = count
}
func() // text node data change

代码分析：

  • 首先定义了callback回调函数和MutationObserver的实例对象，其中构造函数传递的参数是我们的callback。
  • 然后创建一个文本节点并传入文本节点的初始文本，接着调用MutationObserver实例的observe方法，传入我们创建的文本节点和一个config观察配置对象，其中characterData:true的意思是：我们要观察textNode节点的文本变动。config还有其他选项属性，你可以在MDN文档中查看到。
  • 接着，我们定义一个func函数，这个函数主要做的事情就是修改textNode文本节点中的文本内容，当文本内容变动后，callback会自动被调用，因此输出text node data change。

在了解了MutationObserver的用法后，我们来看一下nextTick方法中，是如何使用MutationObserver的：

import { isIE, isNative } from './env'

// 省略代码
else if (!isIE && 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, iOS7, Android 4.4
  // (#6466 MutationObserver is unreliable in IE11)
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
}

我们可以看到，nextTick中首先判断了非IE浏览器并且MutationObserver可用且为原生MutationObserver时才会使用MutationObserver。对于判断非IE浏览器的情况，你可以看Vue.js的issue#6466 (opens new window)来查看原因。

setImmediate和setTimeout

setTimeout对于大部分人来说是非常常见的一个定时器方法，因此我们不做过多的介绍。

在nextTick方法实现中，它使用到了setImmediate，我们在Can I Use (opens new window)网站上可以发现，这个API方法只存在于高版本IE浏览器和低版本Edge浏览器中，其它浏览器不支持。

那么为什么会使用这个方法呢，这是因为我们之前提到的一个issue：MutationObserver在IE浏览器中并不可靠，因此在IE浏览器下降级到使用setImmediate，我们可以把setImmediate看做和setTimeout一样。

setImmediate(() => {
  console.log('setImmediate')
}, 0)
// 约等于
setTimeout(() => {
  console.log('setTimeout')
}, 0)

nextTick实现

介绍完nextTick与异步相关的知识后，我们来的分析一下nextTick方法的实现，首先要说的是：异步降级。

let timerFunc

// The nextTick behavior leverages the microtask queue, which can be accessed
// via either native Promise.then or MutationObserver.
// MutationObserver has wider support, however it is seriously bugged in
// UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
// completely stops working after triggering a few times... so, if native
// Promise is available, we will use it:
/* istanbul ignore next, $flow-disable-line */
if (typeof Promise !== 'undefined' && isNative(Promise)) {
  const p = Promise.resolve()
  timerFunc = () => {
    p.then(flushCallbacks)
    // In problematic UIWebViews, Promise.then doesn't completely break, but
    // it can get stuck in a weird state where callbacks are pushed into the
    // microtask queue but the queue isn't being flushed, until the browser
    // needs to do some other work, e.g. handle a timer. Therefore we can
    // "force" the microtask queue to be flushed by adding an empty timer.
    if (isIOS) setTimeout(noop)
  }
  isUsingMicroTask = true
} else if (!isIE && 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, iOS7, Android 4.4
  // (#6466 MutationObserver is unreliable in IE11)
  let counter = 1
  const observer = new MutationObserver(flushCallbacks)
  const textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
    characterData: true
  })
  timerFunc = () => {
    counter = (counter + 1) % 2
    textNode.data = String(counter)
  }
  isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
  // Fallback to setImmediate.
  // Technically it leverages the (macro) task queue,
  // but it is still a better choice than setTimeout.
  timerFunc = () => {
    setImmediate(flushCallbacks)
  }
} else {
  // Fallback to setTimeout.
  timerFunc = () => {
    setTimeout(flushCallbacks, 0)
  }
}

我们在前面介绍过Event Loop事件循环，由于macro task和micro task特殊的执行机制，我们首先判断当前浏览器是否支持Promise，如果不支持，则降级到判断是否支持MutationObserver，如果还不支持，则继续降级到判断是否支持setImmediate，最后降级使用setTimeout。

在介绍完异步降级之后，我们来看nextTick的实现代码：

const callbacks = []
let pending = false
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) {
      _resolve(ctx)
    }
  })
  if (!pending) {
    pending = true
    timerFunc()
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== 'undefined') {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

nextTick真正的代码并不复杂，首先会把传入的cb收集起来，然后判断pending为false的时候开始执行timerFunc方法，其中timeFunc在异步降级的过程中被定义的。nextTick方法在最后还进行了判断，如果没有传入cb并且支持Promise的话，它会返回一个promise，因此我们在使用nextTick的时候可以有两种使用方式：

const callback = () => {
  console.log('nextTick callback')
}
// 方式一
this.$nextTick(callback)

// 方式二
this.$nextTick().then(() => {
  callback()
})

在最后，我们来看一个在之前没有提到的flushCallbacks方法实现：

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

flushCallbacks方法的主要作用就是：将pending状态还原为false并且遍历callbacks数组中的方法并执行。

变化侦测注意事项

虽然Object.defineProperty()方法很好用，但也会存在一些例外情况，这些例外情况的变动不能触发setter。这种情况，我们分为对象和数组两类来分析。

对象

假设我们有如下例子：

export default {
  data () {
    return {
      obj: {
        a: 'a'
      }
    }
  },
  created () {
    // 1.新增属性b，属性b不是响应式的，不会触发obj的setter
    this.obj.b = 'b'
    // 2.delete删除已有属性，无法触发obj的setter
    delete this.obj.a
  }
}

从以上例子我们可以看到：

  • 当为一个响应式对象新增一个属性的时候，新增的属性不是响应式的，后续对于这个新增属性的任何修改，都无法触发其setter。为了解决这种问题，Vue.js提供了一个全局的Vue.set()方法和实例vm.$set()方法，它们实际上都是同一个set方法，我们会在后续的章节中介绍与响应式相关的全局API的实现。
  • 当一个响应式对象删除一个已有属性的时候，不会触发setter。为了解决这个问题，Vue.js提供了一个全局的vue.delete()方法和实例vm.$delete()方法，它们实际上都是同一个del方法，我们会在后续的章节中介绍与响应式相关的全局API的实现。

数组

假设我们有如下例子：

export default {
  data () {
    return {
      arr: [1, 2, 3]
    }
  },
  created () {
    // 1.通过索引进行修改，无法捕获到数组的变动。
    this.arr[0] = 11
    // 2.通过修改数组长度，无法捕获到数组的变动。
    this.arr.length = 0
  }
}

从以上例子我们可以看到：

  • 通过索引直接修改数组，无法捕捉到数组的变动。
  • 通过修改数组长度，无法捕获到数组的变动。

对于第一种情况，我们可以使用前面提到过的Vue.set或者vm.$set来解决，对于第二种方法，我们可以使用数组的splice()方法解决。

在最新版Vue3.0中，使用到了Proxy来代替Object.defineProperty()实现响应式，使用Proxy后以上问题全部可以解决，然而Proxy属于ES6的内容，因此对于浏览器兼容性方面有一定的要求。

变化侦测API实现

在上一节中，我们分析了变化侦测一些问题，在这一节中我们来分析一下为了解决这些问题，Vue.js是如何实现相关API的。

Vue.set实现

Vue.set和vm.$set引用的是用一个set方法，其中set方法被定义在observer/index.js文件中：

export function set (target: Array<any> | Object, key: any, val: any): any {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  if (!ob) {
    target[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

在代码分析之前，我们来回顾一下Vue.set或者vm.$set的用法：

export default {
  data () {
    return {
      obj: {
        a: 'a'
      },
      arr: []
    }
  },
  created () {
    // 添加对象新属性
    this.$set(this.obj, 'b', 'b')
    console.log(this.obj.b) // b

    // 往数组中添加新元素
    this.$set(this.arr, 0, 'AAA')
    console.log(this.arr[0]) // AAA

    // 通过索引修改数组元素
    this.$set(this.arr, 0, 'BBB')
    console.log(this.arr[0]) // BBB
  }
}

代码分析：

  • set方法首先对传入的target参数进行了校验，其中isUndef判断是否为undefined，isPrimitive判断是否为JavaScript原始值，如果满足其中一个条件则在开发环境下提示错误信息。
export default {
  created () {
    // 提示错误
    this.$set(undefined, 'a', 'a')
    this.$set(1, 'a', 'a')
    this.$set('1', 'a', 'a')
    this.$set(true, 'a', 'a')
  }
}
  • 随后通过Array.isArray()方法判断了target是否为数组，如果是再通过isValidArrayIndex判断是否为合法的数组索引，如果都满足则会使用变异splice方法往数组中指定位置设置值。其中，还重新设置了数组的length属性，这样做是因为我们传入的索引可能比现有数组的length还要大。
  • 接着判断是否为对象，并且当前key是否已经在这个对象上，如果已经存在，则我们只需要进行重新复制即可。
  • 最后，通过defineReactive方法在响应式对象上面新增一个属性，defineReactive方法已经在之前介绍过，这里不再累述。在defineReactive执行完毕后，马上进行派发更新，通知响应式数据的依赖立即更新，可以说以下两段代码是set方法核心中的核心：
defineReactive(ob.value, key, val)
ob.dep.notify()

Vue.delete实现

解决完新增属性的问题后，我们来解决以下删除属性的情况，Vue.delete和vm.$delete使用的是同一个delete方法，它被定义在observer/index.js文件中：

export function del (target: Array<any> | Object, key: any) {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.splice(key, 1)
    return
  }
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid deleting properties on a Vue instance or its root $data ' +
      '- just set it to null.'
    )
    return
  }
  if (!hasOwn(target, key)) {
    return
  }
  delete target[key]
  if (!ob) {
    return
  }
  ob.dep.notify()
}

在代码分析之前，我们来回顾以下Vue.delete或者vm.$delete的用法：

export default {
  data () {
    return {
      obj: {
        a: 'a'
      },
      arr: [1, 2, 3]
    }
  },
  created () {
    // 删除对象属性
    this.$delete(this.obj, 'a')
    console.log(this.obj.a) // undefined
    // 删除数组元素
    this.$delete(this.arr, 1)
    console.log(this.arr)   // [1, 3]
  }
}

代码分析：

  • 首先判断了待删除的target不能为undefined或者原始值，如果是则在开发环境下提示错误。
export default {
  created () {
    // 提示错误
    this.$delete(undefined, 'a')
    this.$delete(1, 'a')
    this.$delete('1', 'a')
    this.$delete(true, 'a')
  }
}
  • 随后通过Array.isArray()方法判断了target是否为数组，如果是再通过isValidArrayIndex判断是否为合法的数组索引，如果都满足则会使用变异splice方法删除指定位置的元素。
  • 接着判断当前要删除的属性是否在target对象中，如果不在则直接返回，什么都不做。
  • 最后，通过delete操作符删除对象上的属性，然后ob.dep.notify()进行派发更新，通知响应式对象上的依赖进行更新。

Vue.observable实现

Vue.observable是在Vue2.6+版本才会有的一个全局方法，它的作用是让一个对象变成响应式：

const obj = {
  a: 1,
  b: 2
}
const observeObj = Vue.observable(obj)
console.log(observeObj.a) // 触发getter

observeObj.b = 22 // 触发setter

这个全局方法是在initGlobalAPI的过程中被定义的，initGlobalAPI我们在之前已经介绍过，这里不在累述：

export default function initGlobalAPI (Vue) {
  // ...
  // 2.6 explicit observable API
  Vue.observable = <T>(obj: T): T => {
    observe(obj)
    return obj
  }
  // ...
}

我们可以看到observable的实现很简单，在方法内部仅仅只是调用了observe方法，然后返回这个obj。关于observe的代码实现，我们在之前的章节中已经介绍过了，这里不再过多的进行说明：

export function observe (value: any, asRootData: ?boolean): Observer | void {
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob: Observer | void
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (
    shouldObserve &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    ob = new Observer(value)
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}
avatar
文章
阅读
粉丝