一、Vue2的响应式
实现原理：Object.defineProperty()中get、set方法
Object.defineProperty(data, 'obj', {
get () {
},
set () {
}
})
缺点：新增和删除对象属性、通过下标修改数组页面不更新
解决办法：
对象：this.$set(this.obj,'name','beizhen')
this.$delete(this.obj,'name')
数组：this.$set(this.list,0,'beizhen')
二、Vue3响应原理
实现原理：Proxy（代理）对象拦截属性变化，Reflect（反射）操作属性
new Proxy(data, {
// 拦截读取属性
get (target, prop) {
return Reflect.get(target, prop)
},
// 拦截设置属性
set (target, prop, value) {
return Reflect.set(target, prop, value)
},
// 拦截删除属性
deleteProperty (target, prop) {
return Reflect.deleteProperty(target, prop)
}
})
为什么不用Object操作属性而用Reflect呢？
Reflect更友好，会有返回值；Object异常需要try/catch捕获