vue源码分析-基础的数据代理检测

简单回顾一下这个系列的前两节，前两节花了大量的篇幅介绍了Vue的选项合并，选项合并是Vue实例初始化的开始，Vue为开发者提供了丰富的选项配置，而每个选项都严格规定了合并的策略。然而这只是初始化中的第一步，这一节我们将对另一个重点的概念深入的分析，他就是数据代理，我们知道Vue大量利用了代理的思想，而除了响应式系统外，还有哪些场景也需要进行数据代理呢？这是我们这节分析的重点。

2.1 数据代理的含义

数据代理的另一个说法是数据劫持，当我们在访问或者修改对象的某个属性时，数据劫持可以拦截这个行为并进行额外的操作或者修改返回的结果。而我们知道Vue响应式系统的核心就是数据代理，代理使得数据在访问时进行依赖收集，在修改更新时对依赖进行更新，这是响应式系统的核心思路。而这一切离不开Vue对数据做了拦截代理。然而响应式并不是本节讨论的重点，这一节我们将看看数据代理在其他场景下的应用。在分析之前，我们需要掌握两种实现数据代理的方法： Object.defineProperty 和 Proxy。

2.1.1 Object.defineProperty

官方定义：Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

基本用法：

Object.defineProperty(obj, prop, descriptor)
1

Object.defineProperty()可以用来精确添加或修改对象的属性，只需要在descriptor对象中将属性特性描述清楚，descriptor的属性描述符有两种形式，一种是数据描述符，另一种是存取描述符，我们分别看看各自的特点。

1. 数据描述符，它拥有四个属性配置

• configurable：数据是否可删除，可配置
• enumerable：属性是否可枚举
• value：属性值,默认为undefined
• writable：属性是否可读写

2. 存取描述符，它同样拥有四个属性选项

• configurable：数据是否可删除，可配置
• enumerable：属性是否可枚举
• get:一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。
• set:一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。

需要注意的是: 数据描述符的value，writable 和 存取描述符中的get, set属性不能同时存在，否则会抛出异常。 有了Object.defineProperty方法，我们可以方便的利用存取描述符中的getter/setter来进行数据的监听,这也是响应式构建的雏形。getter方法可以让我们在访问数据时做额外的操作处理，setter方法使得我们可以在数据更新时修改返回的结果。看看下面的例子,由于设置了数据代理，当我们访问对象o的a属性时，会触发getter执行钩子函数，当修改a属性的值时，会触发setter钩子函数去修改返回的结果。

var o = {
   }
var value;
Object.defineProperty(o, 'a', {
   
    get() {
   
        console.log('获取值')
        return value
    },
    set(v) {
   
        console.log('设置值')
        value = qqq
    }
})
o.a = 'sss' 
// 设置值
console.log(o.a)
// 获取值
// 'qqq'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

前面说到Object.defineProperty的get和set方法是对对象进行监测并响应变化，那么数组类型是否也可以监测呢，参照监听属性的思路，我们用数组的下标作为属性，数组的元素作为拦截对象，看看Object.defineProperty是否可以对数组的数据进行监控拦截。

参考Vue3源码视频讲解：进入学习

var arr = [1,2,3];
arr.forEach((item, index) => {
   
    Object.defineProperty(arr, index, {
   
        get() {
   
            console.log('数组被getter拦截')
            return item
        },
        set(value) {
   
            console.log('数组被setter拦截')
            return item = value
        }
    })
})

arr[1] = 4;
console.log(arr)
// 结果
数组被setter拦截
数组被getter拦截
4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

显然，**已知长度的数组是可以通过索引属性来设置属性的访问器属性的。**但是数组的添加确无法进行拦截，这个也很好理解，不管是通过arr.push()还是arr[10] = 10添加的数据，数组所添加的索引值并没有预先加入数据拦截中，所以自然无法进行拦截处理。这个也是使用Object.defineProperty进行数据代理的弊端。为了解决这个问题，Vue在响应式系统中对数组的方法进行了重写，间接的解决了这个问题，详细细节可以参考后续的响应式系统分析。

另外如果需要拦截的对象属性嵌套多层，如果没有递归去调用Object.defineProperty进行拦截，深层次的数据也依然无法监测。

2.1.2 Proxy

为了解决像数组这类无法进行数据拦截，以及深层次的嵌套问题，es6引入了Proxy的概念，它是真正在语言层面对数据拦截的定义。和Object.defineProperty一样，Proxy可以修改某些操作的默认行为，但是不同的是，Proxy针对目标对象会创建一个新的实例对象，并将目标对象代理到新的实例对象上，。 本质的区别是后者会创建一个新的对象对原对象做代理，外界对原对象的访问，都必须先通过这层代理进行拦截处理。而拦截的结果是我们只要通过操作新的实例对象就能间接的操作真正的目标对象了。针对Proxy，下面是基础的写法:

var obj = {
   }
1
2