Vue2到Vue3的数据响应式原理变化

首先，我们先了解什么是defineProperty

defineProperty其实是定义对象的属性

defineProperty其实不是核心的为一个对象做数据双向绑定，而是去给对象做属性标签，只不过属性里的get和set实现了响应式。

图1

var a={"b":234}---------->console.log(object.getOwnPropertyDesciptor(a,"b") --> 就会出现图上所示的属性名参数。

   var _value=a.b;

//defineProperty有点缺陷在于需要在外定义个值返回

Object.defineProperty(a,"b",{

    get:function(){

        console.log('you get b');

        return _value;

    },

    set:function(newval){

            console.log('this newvalue is'+newval);

            _value=newval;

     }

}

Object.freeze(a,"b")//冰冻

正题：Vue中从改变一个数据到发生改变的一个过程

改变过程.jpg

vue2的简单改变过程

Vue3的数据层改变：

    Vue2中基本上使用defineProperty而vue3中是用proxy

    Proxy对象用于定义基本操作的的自定义行为（和defineProperty类似),功能几乎一样，只不过用法可能有些不同。  

Vue3改变数据的操作

Proxy比defineProperty的好处:

    defineProperty只能监听某个属性，不能全对象监听

    可以省去for循环提高效率

    可以监听数组，不用再对单独的数组做特异性操作

Proxy：

    校验类型

    真正的私有变量

校验源码

检测结果