初步了解Vue3响应式原理

1.Vue3与Vue2响应式的不同。

vue2的问题：1.新增属性、删除属性，界面不会更新      2.直接通过下标修改数组，界面不会自动更新。         

而在Vue3中则解决了这些问题，Vue3的响应式两部分不同：1.通过Proxy(代理)：拦截对象中任意属性变化，包括：属性值的增删改查等。2.Reflect(反射)：对源对象的属性进行操作。

 // 数据
 let person = {
     name:'张三',
     age:18
        }

 // 模拟vue3响应式原理
 const p = new Proxy(person,{
       //读取p的属性会触发get方法    target：是传入的person对象  propName：是读取的属性
       get(target,propName){
       console.log('读取了p身上的属性',target,propName);
       /* 返回读取的属性
       return target[propName] */

       //vue3方式 返回读取的属性
       return Reflect.get(target,propName)
       },

 /*修改p的属性和给p增加属性会触发set方法    target：是传入的person对象  propName：是要修改的属性  value:新的值，修改的值 */
 set(target,propName,value){
        console.log('修改了p身上的属性',target,propName,value);
        /* 返回修改属性的值
        return target[propName] = value */

        // vue3方式 返回修改属性的值
        return Reflect.set(target,propName,value)
        },

 //删除属性触发deleteProperty方法         target：是传入的person对象  propName：是删除的属性
 deleteProperty(target,propName){
         console.log('删除了p身上的属性',target,propName);
        /* 返回是否删除成功的结果，看有没有删除成功，true就成功，false就失败
        return delete target[propName] */

        // vue3方式 删除属性    返回一个结果，看有没有删除成功，true就成功，false就失败
                return Reflect.deleteProperty(target,propName)
            }
        })

 2.为什么要使用Reflect

之所以用Reflect，是因为使用 Object.defineProperty()是单线程,出现一点错误则会让代码全部挂掉，想要解决则需要加上try(),catch()。而使用Reflect，就不会出现这个问题。这样能够少写很多try(),catch()。

使用 Object.defineProperty()

 

 使用Reflect