defineProperty和Proxy

一、vue2中使用defineProperty实现数据响应式

原理： 数据劫持结合发布者-订阅者模式实现，通过Object.defineProperty（）,来劫持各个setter，getter，在数据发生变动时，告诉订阅者是否要更新，执行对应的更新函数从而更新视图
存在的问题：
1.对象直接新添加的属性或删除已有属性，界面不会自动更新（可以强制刷新，但是不推荐）。
2.直接通过下标替换元素或更新length，界面不会自动更新 arr[1] = {}。

二、vue3中使用Proxy实现数据响应式

原理： 拦截对data任意属性的任意（13种操作），包括属性值的读写，属性的添加，属性的删除等…
核心：
1.通过Proxy（代理）：拦截对data任意属性的任意（13种）操作，包括属性值的读写，属性的添加，属性的删除等…。
2.通过Reflect（反射）：动态对被代理对象的相应属性进行特定的操作。
3.数据对象：Vue3使用普通的JaveScript对象作为数据对象，例如data。
4.响应性：Vue3使用reactive函数将数据对象转换为响应式对象。
5.依赖追踪：Vue3使用effect函数来追踪依赖关系，并在响应式数据发生变化时自动触发相应的副作用函数。
6.更新触发：响应式数据发生变化时，相关的组件或视图将会自动更新。