Vue2.0+源码分析——响应式原理

响应式对象

Vue3.0来了，跟Vue2.0的区别还是挺大的，在响应式这块，Vue3.0用的ES6的proxy。而Vue.js的响应式实现的核心是使用到了ES5的Obect.defineProperty。趁还没用Vue3.0，再回顾一下Vue2.0的响应式原理吧!

Obect.defineProperty

Obect.defineProperty会直接在一个对象定义一个新属性，或者修改一个对象的现有属性，语法如下：

1
Object.defineProperty(obj, prop, descriptor)

obj是要在其上定义属性的对象；prop是要定义或者修改的属性的名称；descriptor是将被定义或者修改的属性名字。

其中descriptor的可选键值get和set值得注意，get是给属性提供的getter方法；set是给属性提供的setter方法。当我们对属性进行访问时就会触发getter方法，当我们对属性做修改时，就会触发setter方法。

如果一个对象拥有getter和setter方法，那么我们可以简单的认为这个对象就是响应式对象。

不过vue是如何把对象变成响应式的呢，接下来一起来看源码吧~

initState

在vue初始化阶段，_init方法执行的时候，会执行initState(vm)方法，在src/core/instance/state.js可以找到它的定义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

initState方法主要是对props、data、methods、computed和watch等属性做了初始化操作。下面只分析props和data。

  • initProps
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
function initProps (vm: Component, propsOptions: Object) {
  const propsData = vm.$options.propsData || {}
  const props = vm._props = {}
  // cache prop keys so that future props updates can iterate using Array
  // instead of dynamic object key enumeration.
  const keys = vm.$options._propKeys = []
  const isRoot = !vm.$parent
  // root instance props should be converted
  if (!isRoot) {
    toggleObserving(false)
  }
  for (const key in propsOptions) {
    keys.push(key)
    const value = validateProp(key, propsOptions, propsData, vm)
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      const hyphenatedKey = hyphenate(key)
      if (isReservedAttribute(hyphenatedKey) ||
          config.isReservedAttr(hyphenatedKey)) {
        warn(
          `"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,
          vm
        )
      }
      defineReactive(props, key, value, () => {
        if (!isRoot && !isUpdatingChildComponent) {
          warn(
            `Avoid mutating a prop directly since the value will be ` +
            `overwritten whenever the parent component re-renders. ` +
            `Instead, use a data or computed property based on the prop's ` +
            `value. Prop being mutated: "${key}"`,
            vm
          )
        }
      })
    } else {
      defineReactive(props, key, value)
    }
    // static props are already proxied on the component's prototype
    // during Vue.extend(). We only need to proxy props defined at
    // instantiation here.
    if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }
  }
  toggleObserving(true)
}

props的初始化过程，就是对props的配置进行遍历，遍历主要做了两件事：一件是使用defineReactive方法把每个prop对应的值变成响应式的，可以通过vm._props.xxx访问到对应的属性；另外一件事是使用proxy方法把vm._props.xxx代理到vm.xxx上。

  • initData
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
function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    )
  }
  // proxy data on instance
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) {
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}

从源码中我们可以看到data其实是一个返回对象的函数，并且会检查data中的属性名称是不是跟methods和props中的重复，如果重复就会给出警告。

接下来data的初始化过程也做了两件事：一件是使用proxy将把每一个值vm._data.xxx代理到vm.xxx；另一件事就是使用observe观测这个data的变化，把data也变成了响应式的。

由这两个方法可以看出，props和data的初始化都是把它们变成响应式对象。这个过程使用到了proxy，那就分析一下它们到底做了什么事。

proxy

首先先让我们了解一下代理，代理是把props和data的属性代理到vm实例上，这就是为什么我们可以通过下面这种方式访问到属性的原因。

1
2
3
4
5
6
7
8
props: {
    msg: 'hello,vue'
},
methods: {
    sayMsg() {
        console.log(this.msg)
    }
}

我们在syaMsg函数中可以通过this.msg访问到我们定义在props定义的msg，这个过程发生在proxy阶段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop
}

export function proxy (target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

proxy的实现是这样的：通过Object.defineProperty把target[sourceKey][key]的读写变成了对target[key]的读写。所以对于props来说，对vm._props.xxx的读写变成了对vm.xxx的读写，而使用vm._props.xxx可以访问到props中的属性，所以我们也可以使用vm.xxx访问到props中的属性。同理，data也是如此。

注意实际开发中，不要直接使用vm._props.xxx去访问对象属性，因为_一般表示用于内部访问的

observe

observe的功能是用于检测数据的变化，函数定义位于src/core/observe/index.js

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
/**
 * Attempt to create an observer instance for a value,
 * returns the new observer if successfully observed,
 * or the existing observer if the value already has one.
 */
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
}

observe方法的作用就是给非VNode的对象添加一个Observer，如果已经添加过则直接返回，否则在满足条件下去实例化一个Observer对象。接下来我们看一下Observer是干啥用的。

Observer

Observer是一个类，它的作用是给对象添加getter和setter，用于依赖收集和派发更新：

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
/**
 * Observer class that is attached to each observed
 * object. Once attached, the observer converts the target
 * object's property keys into getter/setters that
 * collect dependencies and dispatch updates.
 */
export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that have this object as root $data

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    def(value, '__ob__', this)
    if (Array.isArray(value)) {
      if (hasProto) {
        protoAugment(value, arrayMethods)
      } else {
        copyAugment(value, arrayMethods, arrayKeys)
      }
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }

  /**
   * Walk through all properties and convert them into
   * getter/setters. This method should only be called when
   * value type is Object.
   */
  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }

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

Observer的构造函数逻辑简单，首先实例化Dep对象，接着执行def函数把自身实例添加到数据对象value的_ob_属性上，def的定义在src/core/util/lang.js中：

1
2
3
4
5
6
7
8
9
10
11
/**
 * Define a property.
 */
export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
  Object.defineProperty(obj, key, {
    value: val,
    enumerable: !!enumerable,
    writable: true,
    configurable: true
  })
}

def是一个非常简单的Object.defineProperty的封装，这就是为什么我们输出data上的对象类型时，会发现该对象多了一个_ob_的属性。

回到Observe的构造函数，接下来会对value做判断，对于数组会调用observeArray方法，否则对纯对象调用walk方法。observeArray是遍历数组再次调用observe方法，而walk方法是遍历对象的key调用defineReactive方法。那defineReactive又是做什么用的呢，我们继续往下看。

defineReactive

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
/**
 * Define a reactive property on an Object.
 */
export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }

  let childOb = !shallow && observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      // #7981: for accessor properties without setter
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })
}

defineReactive函数最开始初始化Dep对象的实例，接着拿到obj的属性描述符，然后对子对象递归调用observe方法，这样就保证了无论obj的结构多复杂，它的所有子属性也能变成响应式的对象，这样我们访问或者修改obj中一个嵌套较深的属性，也能触发getter和setter。最后利用Object.defineProperty去给obj的属性key添加getter和setter。

总结时刻到了~

响应式对象的核心就是Object.definProperty给数据添加getter和setter，目的就是为了我们在访问数据以及写数据的时候能够自动执行一些逻辑：getter做的事就是依赖收集，setter做的事情就是派发更新。

  1. 响应式对象
    1. Obect.defineProperty
    2. initState
    3. proxy
    4. observe
    5. Observer
    6. defineReactive
© 2020 Leni, my github.