一、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捕获