vue源码之变化侦测

Object的变化侦测

vue的最大特点之一就是数据驱动视图，什么是数据驱动视图，简单来说就是数据变化引起视图变化。

使得Object数据实现‘可观测’，Object构造函数提供了defineProperty方法使数据‘可观测’

1、Object.defineProperty

该方法允许精确地添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，在枚举对象属性时会被枚举到（for...in 或 Object.keys 方法），可以改变这些属性的值，也可以删除这些属性。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改（immutable）的。

对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。存取描述符是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一；不能同时是两者。

        let obj = {};
        let val = 'Object的变化侦测';
        Object.defineProperty(obj, 'name',{
            enumerable: true,//当且仅当该属性的enumerable为true时，该属性才会出现在对象枚举属性中
            configurable: true,//当且仅当该属性的configurable为true时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上删除,通过delete obj.name可进行删除操作
            // value: undefined,//该属性对应的值
            // writable: true,//当且仅当该属性的writable为true时，该属性的值才能被赋值运算符进行改变
            get: ()=> {
                // 属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值
                console.log('obj对象的name属性被读取了');
                return val;
            },
            set: (newVal)=> {
                // 属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。
                console.log('obj对象的name属性被修改了',newVal);
                val = newVal
            }
        })
        console.log(obj.name);//此处触发get事件，打印 obj对象的name属性被读取了  Object的变化侦测
        obj.name = '修改';//此处触发了set事件，打印 obj对象的name属性被修改了 修改

通过Object.defineProperty()方法给obj定义了一个name属性，并把这个属性的读和写分别使用get()和set()进行拦截，每当该属性进行读或写操作的时候就会触发get()和set()