比较vue2和vue3的响应式

vue2的响应式

• 核心：

1. 对象：通过defineProperty对对象的已有私有属性的读取和修改进行劫持（监视和拦截）
2. 数组：通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

   Object.defineProperty(date,'count',{
            get(){},
            set()
        })

问题：

• 对象直接天剑的属性或删除已有的属性界面不会自动更新
• 直接通过下标替换元素更新length,界面不会自动更新

vue3的响应式

• 通过Proxy（代理）拦截对data任意属性的任意（13种）操作，包括熟悉的读写，删除等...

• 通过Reflect(反射)动态对被代理对象的相应属性进行特定的操作

• 文档： developer.mozilla.org/zh-CN/docs/… developer.mozilla.org/zh-CN/docs/…

  下面举例常用几个Proxy的操作

new Proxy(data,{
         //拦截读取属性值
         get(target,prop){
             return Reflect.get(target,prop)
         },
         //拦截设置属性值或添加属性值
         set(target,prop,value){
             return Reflect.set(target,prop,value)
         },
         //拦截删除属性
         deleteProperty(trget,prop){
             return  Reflect.deleteProperty(trget,prop)
         }
     })
     Proxy.name='Loin'

获取属性值

看一下log出来的东西

为什么console.log(proxyUser.name)是undefined呢？ 因为没有通过反射对象将这个name对象反射（Reflect）出去，我们需要通过在get方法中写下 return Reflect.get(target,prop)

这就是通过代理对象和反射对象实现的一个小效果，理解起来还是比较简单的

更改添加属性值

再看下面代码

打印出来的user是这样的

Proxy的set方法有三个属性target ,prop, val，对应的Reflect的set方法也有对应的三个属性，通过proxyUser更新name，便可以完成数据的更新。 如果想要操作user里面girlFriend的属性时，比如user.girlFriend.name直接进行赋值更改就可以。

添加属性值则是通过.gender属性进行添加，不管是更改还是添加，每次操作都会调用一次set方法 ###删除目标对象的属性值