Vue2源码分析——处理data

120 阅读3分钟
new Vue({
  el: '#app',
  data: {
    message: 'Hello World!',
  },
})

这是我在使用Vue时写下的第一段代码,我会好奇,在运行这段代码时,其背后Vue究竟完成了哪些操作呢?阅读并理解源码,让我们看到隐藏在框架后的那一片片齿轮,在需要性能优化,或是遇到疑难解决错误时,也许能更轻松地解决问题。

刚开始学习编程时,一般会寻找程序运行的入口。在src/core/instance/index.js中,可以看到对Vue的定义,也是我们所寻找的入口。

约定在先,文章中只摘录部分源码,建议在阅读之后,可以按照文章中的思路顺序看一遍源代码,所有的源码基于Vue@2.16.10版本。在引用的代码之前,都会用注释标记这段代码来自于哪个文件。

// file: src/core/instance/index.js
function Vue(options) {
  // ..
  this._init(options);
}

// ..
initMixin(Vue);
stateMixin(Vue);

实际上HelloWorld项目中调用Vue构造函数时,最终会调用initState()

// file: src/core/instance/init.js
import { initState } from './state'

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    // ..
    initState(vm)
    // ..
  }
}
// file: src/core/instance/state.js
export function initState(vm: Component) {
  // ..
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  // 对于data的处理
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

处理Data数据

在initState中,可以看到对开发过程中常接触到的props/data/computed的处理函数,我们来看看对于data的处理过程——initData()。

// file: src/core/instance/state.js
function initData(vm: Component) {
  // ..
  observe(data); // 最后是使用observe函数对data进行了处理
}

来查看observe函数中对于value,也就是data的处理

// file: src/core/observer/index.js
export function observe(value: any, asRootData: ?boolean): Observer | void {
  // ..
  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
  ) {
    // 参数value将是定义的data对象
    ob = new Observer(value)
  }
  // ..
  return ob
}

其中最主要的是创建了一个Observer对象,来看看Observer对象的构造流程

// file: src/core/observer/index.js
export class Observer {
  // ..
  constructor (value: any) {
    this.value = value
    this.dep = new Dep() // 之后会使用到
    // ..
    def(value, '__ob__', this)
    if (Array.isArray(value)) {
      // ..
      this.observeArray(value)
    } else {
      // 因为目前定义的data是一个object,所以会执行walk函数
      this.walk(value)
    }
  }

  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }

  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}

在Observer构造函数中,因为我们在HelloWorld项目中传入的是一个object,最终将调用Observer了walk函数,即对于data中的每个property调用了defineReactive函数进行处理。

调用defineReactive函数对property进行改造

来看看defineReactive所进行的处理。其中用来到property descriptor,如果不了解的话,建议优先弄清楚再继续阅读。

// file: src/core/observer/index.js
export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

  // 获取descriptor
  const property = Object.getOwnPropertyDescriptor(obj, key)
  // 如果descriptor定明确说明该property不能修改,那么不进行处理
  if (property && property.configurable === false) {
    return
  }

  // 获取已经定义的get和set函数,应该都是undefined
  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }

  // ..
  // 重新定义property
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      // ..
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      // ..
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        // 将执行到这里
        val = newVal
      }
      // ..
    }
  })
}

在defineReactive中,重新将data中的message定义为accessor descriptor。当我们使用data.message时,调用reactiveGetter函数,最终返回的是val,当我们为data.message重新赋值时,调用reactiveSetter函数,实际上是为val重新赋值。

结论

对于data的处理可以简单地理解为,重新定义每个property,将其从value descriptor改造成accessor descriptor,至于为什么要这么做,在之后的computed/watcher的定义中会找到使用的地方。