学习vue2 和vue3的响应式原理

vue2的 响应式
实现原理：
对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）
数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的别更方法进行包裹）
存在问题：
1.新增属性，删除属性，界面不会更新。
let person = {
name：“张三”，
age：“18”，
sex：‘男’，
hobby：[‘吃饭’,‘睡觉’]
}
解决：this.$set(this.person,"sex"{,}^{\prime }{女}^{\prime })this.$delete(this.person.name)
2.直接通过数组下标修改数据，界面不会更新。
解决：this.$set(this.person.hobby[0],0,‘逛街’)
this.person.hobby.splice(0,1,逛街")

vue3 响应式
实现原理：
通过Proxy（代理）：拦截对象中的任意属性的变化，包括：属性的读写，添加，删除等。
通过Reflect(反射)：对源数据的属性进行操作
new Proxy(data,{
ger(){},
set(){},
deleteProperty(){}
})