vue的双向数据绑定的原理

原理

1.vue 双向数据绑定是通过数据劫持，结合发布订阅模式的方式来实现的， 也就是说数据和视图同步数据发生变化视图跟着变化视图变化，数据也随之发生改变.

vue中按照mvvm的架构去进行实现的
mvvm:
m：model
v: view
vm: viewmodel

2.vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

问题：vue的双向数据绑定的原理？

    vue在创建vm的时候，会将数据配置到实例中，然后通过Object.defineProperty方法，为数据动态的添加getter与setter方法。
    当获取数据的时候，会触发对应的getter方法，当设置数据的时候，触发对应的setter方法。
    然后当setter方法触发完成的时候，内部会进一步触发watcher,当数据改变了，视图则更新操作完毕。

代码演示

//Object.defineProperty 需要三个参数（object , propName , descriptor）

//1 object 对象 => 给谁加
//2 propName 属性名 => 要加的属性的名字 【类型：String】
//3 descriptor 属性描述 => 加的这个属性有什么样的特性【类型：Object】

var obj = {}
        let middel = 100
        Object.defineProperty(obj,"msg",{
            get(){
                //console.log("get方法被执行了哦....")
                return middel
            },
            set(val){
                // console.log("set方法被执行了哦....",val)
                // obj.msg = val
                middel = val
            }
        })

        //console.log(obj.msg)   //获取对象的属性的时候，会调用自身的get方法
        obj.msg = 1111           //设置对象的属性的时候，会调用自身的set方法
        console.log(obj.msg)     

注：没有做动态效果图，自己去演示