一、vue2响应式
1.实现原理
（1）对象类型
通过
Object.defineProperty()
对属性的读取、修改进行拦截（数据劫持）。
（2）数据类型
通过重写更新数组的一系列方法来实现拦截（对数组的变更方法进行了包裹）。
Object.defineProperty(data, 'count', {
get() {},
set() {}
})
2.模拟vue2中实现响应式
let person = {
name: 'Tom',
age: 18
}
let p = {}
Object.defineProperty(p, 'name', {
configurable: true, // 配置可被删除和新增（无法响应）
// 读取
get() {
console.log('读取操作响应')
return person.name
},
// 修改
set(value) {
console.log('修改操作响应')
person.name = value
}
})
Object.defineProperty(p, 'age', {
// 与上文name属性类似，这里省略
......
})
3.存在的问题
①新增属性、删除属性，界面不会更新。
②直接通过下标修改数组，界面不会自动更新。
二、vue3响应式
1.实现原理
（1）通过Proxy（代理）
通过Proxy拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。
（2）通过Reflect（反射）
通过Reflect对被代理对象的属性进行操作
2.模拟vue3中实现响应式
用到了Proxy代理对象和Reflect反射对象。
let person = {
name: 'Tom',
age: 18
}
// 让p映射对person的操作
const p = new Proxy(person, {
// 读取、新增
get(target, propName) {
console.log('读取或新增操作响应')
// return target[propName]
return Reflect.get(target, propName)
}
// 修改
set(target, propName, value) {
console.log('修改操作响应')
// target[propName] = value
Reflect.set(target, propName, value)
}
// 删除
deleteProperty(target, propName) {
console.log('删除操作响应')
// return delete target[propName]
return Reflect.deleteProperty(target, propName)
}
})
这个示例中，我们在Reflect对象之上有一行被注释的代码，这里没有用到Reflect，这样做更符合我们的直觉和常规用法，但是缺点就是不好捕获错误，得用到try-catch，这样铺列开来，就让底层源码有一堆的try-catch。用了Reflect对象来处理，就可以让封装框架更加健壮。
