實(shí)現(xiàn)訂閱模型：

// 訂閱型模型
let Dep = {
     //訂閱模型三個(gè)重要組成部分：1.容器 2.添加訂閱 3.發(fā)布訂閱
     //容器
     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);
    },
    //發(fā)布
    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);
        }
    }
}

//數(shù)據(jù)劫持

    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("設(shè)置值");
          value = val;
          //發(fā)布
          Dep.trigger(tag,val);
        }
      })
      //訂閱
      Dep.listen(tag,function(text){
        el.innerHTML = text;
      })
}

測(cè)試：

image

image

數(shù)據(jù)綁定:

更新或新增data中某屬性值，界面涉及到該屬性的節(jié)點(diǎn)都會(huì)更新。

數(shù)據(jù)劫持（v-model）：

Object.defineProperty()

vue2的響應(yīng)式原理：

image