vue1.0源码解析三：实现数据响应化

Question

vue1.0源码解析三：实现数据响应化

lihongxun945 opened this issue 6 years ago · 0 comments

上一篇我们比较overview的讲了vuejs 的架构，从这一篇开始我们来自己动手实现一个vuejs。

首先我们实现数据响应化，数据响应化的意思就是我们要能监听到任何数据变动。比如执行了 this.name = “Yao Ming” 之后，我们要能监听到这个改动。那么怎么实现呢？我们需要借助 ES5 提供的新特性 getter/setter。

构造函数和初始化

首先我们需要写一个 Vue 的构造函数，这里我们直接用ES6的Class语法实现一个Vue类：

class Vue {
  constructor (options) {
    this.init(options)
  }

  /**
   * 初始化的入口
   */
  init (options) {
    //...
    const el = document.querySelector(options.el)
    this._initState()
    //...
  }
}

这里省略了不相关的代码，完整代码请参阅tiny-vue。在 init 函数里面我们会调用 this._initState() 来做state的初始化，为了方便起见，这里我们只处理 data，而跳过对 props 的处理。
为了更好的封装代码，我们把对state的处理放在了 state.js 中。

Proxy

当我们创建一个Vue实例的时候是这样的：

new Vue({
  data: { //xxx}
})

而访问data的时候是这样的 this.name=“xxx”。显然vuejs会读取data中定义的数据，并把它“代理”到 this 上，这一步是也是通过getter/setter 来实现的。

思路就是：遍历 data 的所有 key ，然后在 this 上对每一个key也做一个 getter/setter ，在 getter/setter 内部依然去访问 data 上对应的key。

为了方便起见，首先给 data 做一个别名 this._data = options.data。
这是我们在 state.js 中的主要代码：

  Vue.prototype._initData = function () {
    var dataFn = this.$options.data
    var data = this._data = dataFn ? ( typeof dataFn == 'function' ? dataFn() : dataFn ) : {}

    var keys = Object.keys(data)
    var i, key
    i = keys.length
    while (i--) {
      key = keys[i]
      this._proxy(key)
    }
    // observe data
    observe(data, this)
  }

     Vue.prototype._proxy = function (key) {
          // need to store ref to self here
          // because these getter/setters might
          // be called by child scopes via
          // prototype inheritance.
          var self = this
          Object.defineProperty(self, key, {
               configurable: true,
               enumerable: true,
               get: function proxyGetter () {
                    return self._data[key]
               },
               set: function proxySetter (val) {
                    self._data[key] = val
               }
          })
  }

这样，当我们在 this 上做读写操作的时候，实际上是对 this._data 做的操作。

Observer

下一步，我们需要检测任何对 this._data 的读写操作，在 vuejs中，这是通过 Observer 来实现的。

Observer 的作用就是：对传入的数据设置 getter/setter ，当调用 getter 时收集依赖，当调用 setter 时通知依赖。

暂时我们不用太纠结这个依赖 是什么，在后面讲到 Watcher 的时候会仔细讲这部分。
所以 Observer 做的事情其实和上一步的 Proxy 很像。那么这里就有一个很有意思的问题，为什么不直接在 proxy 的getter和setter中去做Observe要做的事呢？这是因为vuejs还有一个 this.$data 的API，如果在proxy中做了，那么直接使用this.$data.name 就无法触发我们 getter/setter，所以还是得在 this._data 本身上来实现。

我们需要创建一个 Observer 类：

import Dep from  './dep.js'

function Observer(value) {
  this.value = value
  this.dep = new Dep()
  // TODO: support Array
  this.walk(value)
}

// Instance methods

/**
 * Walk through each property and convert them into
 * getter/setters. This method should only be called when
 * value type is Object.
 *
 * @param {Object} obj
 */

Observer.prototype.walk = function (obj) {
  var keys = Object.keys(obj)
  for (var i = 0, l = keys.length; i < l; i++) {
    this.convert(keys[i], obj[keys[i]])
  }
}

/**
 * Convert a property into getter/setter so we can emit
 * the events when the property is accessed/changed.
 *
 * @param {String} key
 * @param {*} val
 */

Observer.prototype.convert = function (key, val) {
  defineReactive(this.value, key, val)
}
// …

export function observe (value, vm) {
  const ob = new Observer(value)
  ob.addVm(vm)
  return ob
}


/**
 * Define a reactive property on an Object.
 *
 * @param {Object} obj
 * @param {String} key
 * @param {*} val
 */
export function defineReactive (obj, key, val) {
  var dep = new Dep()
  //...

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      var value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend()
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      var value = getter ? getter.call(obj) : val
      if (newVal === value) {
        return
      }
      val = newVal
      dep.notify()
    }
  })
}

然后我们在 initData 中调用 observer(data) 就可以把 data 变成响应式的。

当执行 this.name =“xxx” 的时候，代码最终会进到 defineReactive 中的 reactiveSetter 中去。

这里的Dep其实是记录了 Observer 和 Watcher 的依赖关系，因为很可能存在多个 watcher 依赖同一个 observer 的情况，所以 Observer 中会创建一个 dep 用来记录到底哪些 watcher 依赖他。

单纯看数据响应化是比较简单的。下一步我们开始讲 Directive 的实现的时候就会比较复杂一些，也会涉及到 Observer 相关的内容。

注意：上面的代码并不是完整的，并且省略了一些比较简单的（比如 lifecycle.js）代码，完整代码请参阅 tiny-vue

构造函数 和 初始化

Proxy

Observer

构造函数和初始化