vue之mvvm双向绑定

//学习vue之后对vue的mvvm双向绑定模式有了一些更深入的了解

一、mvvm是什么

mvvm的调用方式:在ViewModel当中会有一个叫 Binder的东西。你只需要在View的模版语法中，指令式地声明View上的显示的内容是和Model的哪一块数据绑定的。 当ViewModel对Model进行更新的时候，Binder会自动把数据更新到View上 去；当用户对View进行操作（例如表单输入），Binder也会自动的把数据更新到Model上去。这种方式称为：Two-way data-binding，双向数据绑定。

---

简单点来说mvvm是实现了双向绑定的一种模式,在视图层或模型层改变数据都会实现页面和模型数据的一种动态改变

这样来看vue的mvvm模式可能便于理解

二、vue-mvvm实现双向绑定的原理

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

   let obj = {}
        let middel = "";
        Object.defineProperty(obj,"msg",{
            get(){
                return middel;
            },
            set(val){
             	//设置val值执行以下内容
                middel = val
            }
        })

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

三、总结

vue实现双向绑定的原理主要在于 Object.defineProperty方法

好好学习，天天向上。中国加油，武汉加油，千峰加油！