浅析Vue3.0为什么采用Proxy：搞懂Object.defineProperty和Proxy响应式的区别
一、Object.defineProperty()
作用：在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
1、基本使用
语法：Object.defineProperty(obj, prop, descriptor)
参数：要添加属性的对象、要定义或修改的属性的名称或 [Symbol]、要定义或修改的属性描述符
这个比较基础就不再多说了。Vue2 就是通过这种方法，成功监听 data 里各属性的变化的
2、监听对象上的多个属性
在实际情况中，我们通常需要一次监听多个属性的变化。
这时我们需要配合 Object.keys(obj) 进行遍历，这个方法可以返回 obj 对象身上的所有可枚举属性组成的字符数组。利用这个API，我们就可以遍历劫持对象的所有属性。但是，如果只是上面的思路与该API的简单结合，我们就会发现并达不到效果，下面是我写的一个错误的版本
Object.keys(person).forEach(function (key) {
Object.defineProperty(person, key, {
enumerable: true,
configurable: true,
// 默认会传入this
get() {
return person[key]
},
set(val) {
console.log(`对person中的${key}属性进行了修改`)
person[key] = val
// 修改之后可以执行渲染操作
}
})
})
console.log(person.age)
看起来感觉上面的代码没有什么错误，但是试着运行一下，你会和我一样栈溢出。这是为什么呢？让我们聚焦在get方法里，我们在访问person身上的属性时，就会触发get方法，返回person[key]，但是访问person[key]也会触发get方法，导致递归调用，最终栈溢出。
这也引出了我们下面的方法，我们需要设置一个中转Obsever，来让get中return的值并不是直接访问obj[key]。
let person = {
name: '',
age: 0
}
// 实现一个响应式函数
function defineProperty(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log(`访问了${key}属性`)
return val
},
set(newVal) {
console.log(`${key}属性被修改为${newVal}了`)
val = newVal
}
})
}
// 实现一个遍历函数Observer
function Observer(obj) {
Object.keys(obj).forEach((key) => {
defineProperty(obj, key, obj[key])
})
}
Observer(person)
console.log(person.age)
person.age = 18
console.log(person.age)
3、深度监听一个对象
function defineProperty(obj, key, val) {
//如果某对象的属性也是一个对象，递归进入该对象，进行监听
if(typeof val === 'object'){
observer(val)
}
Object.defineProperty(obj, key, {
get() {
console.log(`访问了${key}属性`)
return val
},
set(newVal) {
console.log(`${key}属性被修改为${newVal}了`)
val = newVal
}
})
}
当然我们也要在observer里面加一个递归停止的条件：
function Observer(obj) {
//如果传入的不是一个对象，return
if (typeof obj !== "object" || obj === null) return
Object.keys(obj).forEach((key) => {
defineProperty(obj, key, obj[key])
})
}
其实到这里就差不多解决了，但是还有一个小问题，如果对某属性进行修改时，如果原本的属性值是一个字符串，但是我们重新赋值了一个对象，我们要如何监听新添加的对象的所有属性呢？其实也很简单，只需要修改set函数：
set(newVal) {
// 如果newVal是一个对象，递归进入该对象进行监听
if(typeof newVal === 'object'){
observer(key)
}
console.log(`${key}属性被修改为${newVal}了`)
val = newVal
}
4、数组监听的问题：
索引修改监听不到，新增索引监听不到，修改 length 监听不到
二、Proxy
是不是感觉有点复杂？事实上，在上面的讲述中，我们还有问题没有解决：那就是当我们要给对象新增加一个属性时，也需要手动去监听这个新增属性。也正是因为这个原因，使用vue给 data 中的数组或对象新增属性时，需要使用 vm.$set 才能保证新增的属性也是响应式的。
可以看到，通过Object.definePorperty()进行数据监听是比较麻烦的，需要大量的手动处理。这也是为什么在Vue3.0中尤雨溪转而采用Proxy。接下来让我们一起看一下Proxy是怎么解决这些问题的吧。
1、基本使用
语法：const p = new Proxy(target, handler) 参数:
- target：要使用
Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理） - handler：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理
p的行为。
其实这里还有第三个参数，可以用来设定 this。
通过Proxy，我们可以对设置代理的对象上的一些操作进行拦截，外界对这个对象的各种操作，都要先通过这层拦截。（和defineProperty差不多）
//定义handler对象
let hander = {
get(obj, key) {
// 如果对象里有这个属性，就返回属性值，如果没有，就返回默认值66
return key in obj ? obj[key] : 66
},
set(obj, key, val) {
obj[key] = val
return true
}
}
//把handler对象传入Proxy
let proxyObj = new Proxy(person, hander)
这个也比较基础，就不多说了，需要清楚的是：Proxy代理的是整个对象，而不是对象的某个特定属性，不需要我们通过遍历来逐个进行数据绑定。
需要注意的是：
（1）之前我们在使用 Object.defineProperty() 给对象添加一个属性之后，我们对对象属性的读写操作仍然在对象本身。但是一旦使用Proxy，如果想要读写操作生效，我们就要对Proxy的实例对象 proxyObj 进行操作。
（2）另外，MDN上明确指出set()方法应该返回一个布尔值，否则会报错TypeError。
2、轻松解决Object.defineProperty中遇到的问题
在上面使用Object.defineProperty的时候，我们遇到的问题有：
（1）一次只能对一个属性进行监听，需要遍历来对所有属性监听。这个我们在上面已经解决了。
（2）在遇到一个对象的属性还是一个对象的情况下，需要递归监听。
（3）对于对象的新增属性，需要手动监听
（4）对于数组通过push、unshift方法增加的元素，也无法监听
这些问题在Proxy中都轻松得到了解决。
3、Proxy支持13种拦截操作
除了get和set来拦截读取和赋值操作之外，Proxy还支持对其他多种行为的拦截。详见之前介绍 Proxy 的博客。
4、Proxy中有关this的问题
虽然Proxy完成了对目标对象的代理，但是它不是透明代理，也就是说：即使handler为空对象（即不做任何代理），他所代理的对象中的this指向也不是该对象，而是proxyObj对象。让我们来看一个例子：
let target = {
m() { // 检查this的指向是不是proxyObkj
console.log(this === proxyObj)
}
}
let handler = {}
let proxyObj = new Proxy(target, handler)
proxyObj.m()//输出:true
target.m()//输出:false
可以看到，被代理的对象target内部的this指向了proxyObj。这种指向有时候就会导致问题出现，比如有的JS内置对象的内部属性，需依靠正确的this才能获取，所以Proxy也无法代理这些原生对象的属性。请看下面一个例子：
const target = new Date();
const handler = {};
const proxyObj = new Proxy(target, handler);
proxyObj.getDate();
// TypeError: this is not a Date object.
可以看到，通过proxy代理访问Date对象中的getDate方法时抛出了一个错误，这是因为getDate方法只能在Date对象实例上面拿到，如果this不是Date对象实例就会报错。那么我们要如何解决这个问题呢？只要手动把this绑定在Date对象实例上即可，请看下面一个例子：
const target = new Date('2015-01-01');
const handler = {
get(target, prop) {
if (prop === 'getDate') {
return target.getDate.bind(target);
}
return Reflect.get(target, prop);
}
};
const proxy = new Proxy(target, handler);
proxy.getDate() // 1
这也就是为什么 Proxy 总是要与 Reflect 配合使用的原因。
