Vue 的MVVM模型和数据代理

MVVM模型

1 . M : 模型 (model) ： data中的数据
2 . V ： 视图 (View) ： 模板代码
3 . V M ： 视图模型 (ViewModel) : Vue实例
观察发现 ：

1.data上的所有属性，最后都出现在Vm上。
2 . Vm上所有的属性和vue原型上的属性，在vue模板上都可以直接使用

数据代理

回顾 Object.defineProperty方法

 let number =18;
    var obj  = {
      name:'张三',
      sex:'男',
    }
    Object.defineProperty(obj,'age',{ 
      // value:'18',
      // enumerable:true,  //控制属性是否可以枚举
      // writable:true,      //控制属性是否可以被修改
      // configurable:true,   //控制属性是否可以被删除  

      // 当有人读取obj的age属性时，get函数(getter)就会被调用，返回值就是age的值
      get(){
        console.log('有人读取了age属性')
        return number
      },
       // 当有人修改obj的age属性时，set函数(setter)就会被调用，返回值就是修改的值
      set(value){
        console.log('有人修改了age属性，值是',value);
        number = value;
       }
    })

定义：通过一个对象代理对另一个对象中的属性的操作(读 / 写)

   let a = {x:100};
    let b = {y:200};
    Object.defineProperty(b,'x',{
      get(){
        return a.x;
      },
      set(value){
        a.x = value;
      }   

Vue实现数据代理

1 . 通过vm对象来处理data对象中属性的基本操作(读 / 写).
2 . 好处 ： 更方便的操作data中的数据

基本原理 ：

1.通过 Object.defineProperty()把data对象中所有属性添加到vm上。
2 . 为每一个添加到vm上的属性，都指定一个getter/setter。
3 . 在getter/setter内部去操作data中对应的属性