手写简化版vue2响应式原理：

实现订阅模型：

// 订阅型模型
let Dep = {
     //订阅模型三个重要组成部分：1.容器 2.添加订阅 3.发布订阅
     //容器
     containterlist :{},
    //添加
    listen:function(key,fn){
         // if(!this.containterlist [key]){  
        //   this.containterlist [key] = [];
        // }
        // this.containterlist [key].push(fn);
        //以上等同于下面
        (this.containterlist [key] || (this.containterlist [key]=[])).push(fn);
    },
    //发布
    trigger:function(){
         let key  = Array.prototype.shift.call(arguments),
        fns = this.continterList[key];
         if(!fns || fns.length ===0){
              return false;
        }
        for(let i =0,fn;fn=fns[i++];){
              fn.apply(this,arguments);
        }
    }
}

//数据劫持

    let dataWatch = function({data,tag,datakey,selector}){
      let value = "",
      el = document.querySelector(selector);
     Object.defineProperty(data,datakey,{
        //取值
        get:function(){
              console.log("取值");
              return value;
          },

        set:function(val){
          console.log("设置值");
          value = val;
          //发布
          Dep.trigger(tag,val);
        }
      })
      //订阅
      Dep.listen(tag,function(text){
        el.innerHTML = text;
      })
}

测试：

image

image

数据绑定:

更新或新增data中某属性值，界面涉及到该属性的节点都会更新。

数据劫持（v-model）：

Object.defineProperty()

vue2的响应式原理：

image