为何Vue3 Proxy 更快 - 翁先森的博客

相比于Vue2.x Object.defineProperty的响应式原理，Vue3 Proxy的优势在哪里呢。以下我们从两者源码角度分析下使用Proxy的优势。

Proxy优势：

ES6原生Proxy语法，更快的初始化，懒加载，不用递归的定义Object.defineProperty
支持动态的添加object新属性
支持原生array数组操作

假设有如下的响应式对象时：

1
data() {
2
    return { a: { b: { c: { d: { e: 11 } } } } }
3
}
4
//  以上等价于以下代码
5
const data = { a: { b: { c: { d: { e: 11 } } } } }
6
// Vue2.x
7
Vue.observe(data)
8
// Vue3：
9
reactive(data)
10

11

12
        Copied!

#Vue2.x Object.defineProperty#

vue2初始化时，会递归的调用Object.defineProperty。当第一层对象属性定义后，再会递归调用下一层属性的Object.defineProperty（为了是依赖收集）。所以在初始化时Vue2.x需要更多时间，去同步递归定义Object.defineProperty操作。

另外一个缺点也可以看出，初始化时把data的属性递归遍历收集了，当data在业务运行过程中，动态新增属性该怎么办？在Vue2.x中由于不是懒加载，所以需要用户主动告诉Vue框架，告诉哪些新增属性是要去依赖收集的，这就是Vue.set (opens new window)API的来由。同理Vue.delete (opens new window)。

以下是精简主流程的源码，Vue2.x中定义响应式对象API是：Vue.observe(data)

1
// https://github.com/vuejs/vue/blob/dev/src/core/observer/index.js
2
export function observe (value: any, asRootData: ?boolean): Observer | void {
3
  let ob = new Observer(value)
4
  return ob
5
}
6

7
export class Observer {
8
  constructor (value: any) {
9
      this.walk(value)
10
  }
11

12
  walk (obj: Object) {
13
    const keys = Object.keys(obj)
14
    for (let i = 0; i < keys.length; i++) {
15
      defineReactive(obj, keys[i])
16
    }
17
  }
18
}
19

20
export function defineReactive (
21
  obj: Object,
22
  key: string,
23
  val: any,
24
  customSetter?: ?Function,
25
  shallow?: boolean // default: false
26
) {
27
  const dep = new Dep()
28
  const getter = property && property.get
29
  const setter = property && property.setter
30

31
  // 同步实时：递归子层级
32
  let childOb = !shallow && observe(val)
33

34
  Object.defineProperty(obj, key, {
35
    enumerable: true,
36
    configurable: true,
37
    get: function reactiveGetter () {
38
      const value = getter ? getter.call(obj) : val
39
      // ... dep依赖收集
40
      return value
41
    },
42
    set: function reactiveSetter (newVal) {
43
      setter.call(obj, newVal)
44
      // ... dep触发更新
45
    }
46
  })
47
}
48

49

50
        Copied!

#Vue3 Proxy处理#

Vue3中定义响应式对象API是：reactive(data)。

Proxy提供了对JS的元数据编程，即可以使用JS提供的语法特性，创建新的JS语法。

可以看到Vue3中定义响应式非常简单，即原生的 new Proxy(target, handlers)。此时这里没有递归调用初始化，即可看成是懒加载去依赖收集（用到才去依赖收集）。

再看看代理操作baseHandlers中get定义是如何的。

1
// https://github.com/vuejs/vue-next/blob/master/packages/reactivity/src/reactive.ts
2
export function reactive(target: object) {
3
  return createReactiveObject(target)
4
}
5

6
function createReactiveObject(target: Target) {
7
  const observed = new Proxy(
8
    target,
9
    baseHandlers // {get, set, deleteProperty}
10
  )
11
  return observed
12
}
13

14

15
        Copied!

get定义，主要用来依赖收集，同时如果属性的value为Object对象时，自定进行Proxy代理。

1
// https://github.com/vuejs/vue-next/blob/master/packages/reactivity/src/baseHandlers.ts
2
const get = createGetter()
3

4
function createGetter(isReadonly = false, shallow = false) {
5
  return function get(target: Target, key: string | symbol, receiver: object) {
6
    const res = Reflect.get(target, key, receiver)
7

8
    // ...依赖收集
9

10
    // 懒加载，当访问响应式对象时，再去构造下一个Proxy(res, { getter })
11
    if (isObject(res)) {
12
      return reactive(res)
13
    }
14

15
    return res
16
  }
17
}
18

19

20
        Copied!