vue底层原理之Object.defineProperty()方法

一.双向数据绑定原理

1. 众所周知，vue中data数据改变，视图相对应的数据也会改变，实现了双向数据绑定。
2. 其实vue主要通过watch监听事件，监听data中的属性，全部使用object.defineProperty方法中的get获取属性值方法和set设置属性值方法，当属性值改变的时候，就会触发，然后watch就会触发，进而视图更新。

二.object.defineProperty()方法

1.官方原话：**Object.defineProperty()** 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
意思就是他可以给一个对象添加属性，或者修改属性。
2.object.defineproperty(obj,attr,description)包含三个参数，都是必须的；其中obj是对象，attr是对象的属性，description是属性的描述。

let a = 'hello'
        let obj = {}
        Object.defineProperty(obj,'name',{
            get:function(){
                return a
            },
            set:function(v){
                console.log("我是set的数据")
                return a = v
            }
        })
        console.log(obj.name)//hello
        obj.name = '66666'
        console.log(obj.name)//我是set的数据, 6666
        

说明：代码一目了然，直接打印就能获取属性值，当改变之后，便执行set函数，然后将结果返回给watch，进而触发双向数据绑定。