//發(fā)布訂閱模式
function Dep() {
  this.subs = []//收集依賴（也就是手機(jī)watcher實(shí)例），
}
Dep.prototype.addSub = function (sub) { //添加訂閱者
  this.subs.push(sub); //實(shí)際上添加的是watcher這個(gè)實(shí)例
}
Dep.prototype.notify = function (sub) { //發(fā)布，這個(gè)方法的作用是遍歷數(shù)組，讓每個(gè)訂閱者的update方法去執(zhí)行
  this.subs.forEach((sub) => sub.update())
}

function Watcher(fn) {
  this.fn = fn;
}
Watcher.prototype.update = function () { //添加一個(gè)update屬性讓每一個(gè)實(shí)例都可以繼承這個(gè)方法
  this.fn();
}
let watcher = new Watcher(function () {
  alert(1)
});//訂閱
let dep = new Dep();
dep.addSub(watcher);//添加依賴，添加訂閱者
dep.notify();//發(fā)布，讓每個(gè)訂閱者的update方法執(zhí)行

<template>
   <div id="app">
    <div>obj.text的值:{{obj.text}}</div>
    <p>word的值:{{word}}</p>
    <input type="text" v-model="word">
  </div>
</template>
<script>
  new Vue({
    el: "#app",
    data: {
      obj: {
        text: "向上",
      },
      word: "學(xué)習(xí)"
    },
    methods:{
    // ...
    }
  })
</script>

function Vue(options = {}) {
  this.$options = options;//接收參數(shù)
  var data = this._data = this.$options.data;
  observer(data);//對(duì)data中的數(shù)據(jù)進(jìn)型循環(huán)遞歸綁定
  for (let key in data) {
    let val = data[key];
    observer(val);
    Object.defineProperty(this, key, {
      enumerable: true,
      get() {
        return this._data[key];
      },
      set(newVal) {
        this._data[key] = newVal;
      }
    })
  }
  new Compile(options.el, this)
};

function observer(data) {
  if (typeof data !== "object") return;
  return new Observer(data);//返回一個(gè)實(shí)例
}
function Observer(data) {
  let dep = new Dep();//創(chuàng)建一個(gè)dep實(shí)例
  for (let key in data) {//對(duì)數(shù)據(jù)進(jìn)行循環(huán)遞歸綁定
    let val = data[key];
    observer(val);
    Object.defineProperty(data, key, {
      enumerable: true,
      get() {
        Dep.target && dep.depend(Dep.target);//Dep.target就是Watcher的一個(gè)實(shí)例
        return val;
      },
      set(newVal) {
        if (newVal === val) {
          return;
        }
        val = newVal;
        observer(newVal);
        dep.notify() //讓所有方法執(zhí)行
      }
    })
  }
}

function Compile(el, vm) {
  vm.$el = document.querySelector(el);
  let fragment = document.createDocumentFragment(); //創(chuàng)建文檔碎片，是object類型
  while (child = vm.$el.firstChild) {
    fragment.appendChild(child);
  };//用while循環(huán)把所有節(jié)點(diǎn)都添加到文檔碎片中，之后都是對(duì)文檔碎片的操作，最后再把文檔碎片添加到頁(yè)面中,這里有一個(gè)很重要的特性是，如果使用appendChid方法將原dom樹(shù)中的節(jié)點(diǎn)添加到fragment中時(shí)，會(huì)刪除原來(lái)的節(jié)點(diǎn)。
  replace(fragment);

  function replace(fragment) {
    Array.from(fragment.childNodes).forEach((node) => {//循環(huán)所有的節(jié)點(diǎn)
      let text = node.textContent;
      let reg = /\{\{(.*)\}\}/;
      if (node.nodeType === 3 && reg.test(text)) {//判斷當(dāng)前節(jié)點(diǎn)是不是文本節(jié)點(diǎn)且符不符合{{obj.text}}的輸出方式，如果滿足條件說(shuō)明它是雙向的數(shù)據(jù)綁定，要添加訂閱者（watcher）
        console.log(RegExp.$1); //obj.text
        let arr = RegExp.$1.split("."); //轉(zhuǎn)換成數(shù)組的方式[obj,text]，方便取值
        let val = vm;
        arr.forEach((key) => { //實(shí)現(xiàn)取值this.obj.text
          val = val[key];
        });
        new Watcher(vm, RegExp.$1, function (newVal) {
          node.textContent = text.replace(/\{\{(.*)\}\}/, newVal)
        });
        node.textContent = text.replace(/\{\{(.*)\}\}/, val); //對(duì)節(jié)點(diǎn)內(nèi)容進(jìn)行初始化的賦值
      }
      if (node.nodeType === 1) { //說(shuō)明是元素節(jié)點(diǎn)
        let nodeAttrs = node.attributes;
        Array.from(nodeAttrs).forEach((item) => {
          if (item.name.indexOf("v-") >= 0) {//判斷是不是v-model這種指令
            node.value = vm[item.value]//對(duì)節(jié)點(diǎn)賦值操作
          }
          //添加訂閱者
          new Watcher(vm, item.value, function (newVal) {
            node.value = vm[item.value]
          });
          node.addEventListener("input", function (e) {
            let newVal = e.target.value;
            vm[item.value] = newVal;
          })
        })
      }
      if (node.childNodes) { //這個(gè)節(jié)點(diǎn)里還有子元素，再遞歸
        replace(node);
      }
    })
  }

  //這是頁(yè)面中的文檔已經(jīng)沒(méi)有了，所以還要把文檔碎片放到頁(yè)面中
  vm.$el.appendChild(fragment);

}

var uid=0;
//發(fā)布訂閱
function Dep() {
  this.id=uid++;
  this.subs = [];
}
Dep.prototype.addSub = function (sub) { //訂閱
  this.subs.push(sub); //實(shí)際上添加的是watcher這個(gè)實(shí)例
}
Dep.prototype.depend = function () { // 訂閱管理器
  if(Dep.target){//只有Dep.target存在時(shí)采取添加
    Dep.target.addDep(this);
  }
}
Dep.prototype.notify = function (sub) { //發(fā)布，遍歷數(shù)組讓每個(gè)訂閱者的update方法去執(zhí)行
  this.subs.forEach((sub) => sub.update())
}

function Watcher(vm, exp, fn) {
  this.fn = fn;
  this.vm = vm;
  this.exp = exp //
  this.newDeps = [];
  this.depIds = new Set();
  this.newDepIds = new Set();
  Dep.target = this; //this是指向當(dāng)前（Watcher）的一個(gè)實(shí)例
  let val = vm;
  let arr = exp.split(".");
  arr.forEach((k) => { //取值this.obj.text
    val = val[k] //取值this.obj.text,就會(huì)觸發(fā)數(shù)據(jù)劫持的get方法,把當(dāng)前的訂閱者（watcher實(shí)例）添加到依賴中
  });
  Dep.target = null;
}
Watcher.prototype.addDep = function (dep) {
  var id=dep.id;
  if(!this.newDepIds.has(id)){
    this.newDepIds.add(id);
    this.newDeps.push(dep);
    if(!this.depIds.has(id)){
      dep.addSub(this);
    }
  }
 
}
Watcher.prototype.update = function () { //這就是每個(gè)綁定的方法都添加一個(gè)update屬性
  let val = this.vm;
  let arr = this.exp.split(".");
  arr.forEach((k) => { 
    val = val[k] //取值this.obj.text，傳給fn更新操作
  });
  this.fn(val); //傳一個(gè)新值
}