mvvm的初步思想

1.Object.defineProperty(obj,key,desc);

　　用法：1.给对象新增属性和特性

　　　　　2.修改对象属性值和特性

　　　　　　desc（属性特性）：

　　　　　　　　1.enumerable：boolean 可枚举

　　　　　　　　2.writable ：boolean 可写

　　　　　　　　3.value：any 赋值

　　　　　　　　4.get 取值

　　　　　　　　5.set 改值

2.思路：

　　对象的赋值和改值实际上是经过Object.defineProperty的get和set特性来实现的，通常默认模式。

　　经过改写属性的get和set的特性，来实现对一个对象的监听。

3.举例：

　　

var obj = {age:23};
console.log(obj.age);    //23

Object.defineProperty(obj,'age',{
    get(){
        return 24;
    }    
});
console.log(obj.age);  //24

obj.age = 25;
console.log(obj.age);  //24

　　原理：对象属性和赋值取值都会触发自身的get和set特性。

4.实现：

 /*js 监听器*/
    var transi = "";
    function observe(obj,key){
      if(obj[key] && (typeof obj[key] == 'object')){
        Object.keys(obj[key]).forEach((v,index)=>{
          observe(obj[key],v,obj[key][v]);
        });
      } else {
        Object.defineProperty(obj,key,{
          set(newV){
            transi = newV;
            console.log('值改变');
          },
          get(){
            console.log('新值为' + transi);
            return transi;
          }
        })
      }
    }
    var obj = {name : 'wang',age:{max:12,good:{at:30}}};
    observe(window,'obj');
    obj.age.good.at = 44;
    console.log(obj.age.good.at);

　5.延伸：

　　vue的双向绑定机制：当改变一个值时，在这个值的set特性中触发其余值的改变，实现数据实时更新的机制。

　6.核心：

　　1.observer观察者： 观察一个对象，当某一属性改变时，触发set特性，由set触发与之关联的属性，哪些与之关联，怎么创建起关系？须要一个订阅者，即为一个数组，存放一些关联的对象。

　　2.watcher订阅者： 订阅者须要本身的更新机制，在set中被触发时须要及时更新本身的数据，再渲染到页面上，须要complier来解析页面，实现view层改变。

　　3.complier解析： 经过js获取指令模板，正则匹配换值，将操做封装放进set函数中实现view层自动更新。