Manually implement the two-way data binding principle of Vue2.0

//Publish and subscribe mode function Dep() {
  this.subs = []//Collect dependencies (that is, mobile watcher instances),
}
Dep.prototype.addSub = function (sub) { //Add subscriber this.subs.push(sub); //Actually what is added is the watcher instance}
Dep.prototype.notify = function (sub) { //Publish, this method is used to traverse the array and let each subscriber's update method execute this.subs.forEach((sub) => sub.update())
}

function Watcher(fn) {
  this.fn = fn;
}
Watcher.prototype.update = function () { //Add an update property so that each instance can inherit this method this.fn();
}
let watcher = new Watcher(function () {
  alert(1)
}); //Subscription let dep = new Dep();
dep.addSub(watcher); //Add dependency, add subscriber dep.notify(); //Publish, let each subscriber's update method execute

<template>
   <div id="app">
    <div>The value of obj.text:{{obj.text}}</div>
    <p>The value of word:{{word}}</p>
    <input type="text" v-model="word">
  </div>
</template>
<script>
  new Vue({
    el: "#app",
    data: {
      obj: {
        text: "Up",
      },
      word: "learning"
    },
    methods:{
    // ...
    }
  })
</script>

function Vue(options = {}) {
  this.$options = options; //Receive parameters var data = this._data = this.$options.data;
  observer(data); //Recursively bind the data in data 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); //Return an instance}
function Observer(data) {
  let dep = new Dep(); //Create a dep instance for (let key in data) { //Recursively bind the data let val = data[key];
    observer(val);
    Object.defineProperty(data, key, {
      enumerable: true,
      get() {
        Dep.target && dep.depend(Dep.target); //Dep.target is an instance of Watcher return val;
      },
      set(newVal) {
        if (newVal === val) {
          return;
        }
        val = newVal;
        observer(newVal);
        dep.notify() //Let all methods execute}
    })
  }
}

function Compile(el, vm) {
  vm.$el = document.querySelector(el);
  let fragment = document.createDocumentFragment(); //Create document fragment, which is of object typewhile (child = vm.$el.firstChild) {
    fragment.appendChild(child);
  }; //Use a while loop to add all nodes to the document fragment, followed by operations on the document fragment, and finally add the document fragment to the page. A very important feature here is that if the appendChid method is used to add a node in the original DOM tree to a fragment, the original node will be deleted.
  replace(fragment);

  function replace(fragment) {
    Array.from(fragment.childNodes).forEach((node) => {//Loop all nodes let text = node.textContent;
      let reg = /\{\{(.*)\}\}/;
      if (node.nodeType === 3 && reg.test(text)) {//Judge whether the current node is a text node and whether it conforms to the output method of {{obj.text}}. If the conditions are met, it means that it is a two-way data binding and a subscriber (watcher) needs to be added.
        console.log(RegExp.$1); //obj.text
        let arr = RegExp.$1.split("."); //Convert to array [obj, text] for easy value retrieval let val = vm;
        arr.forEach((key) => { //Realize the value this.obj.text
          val = val[key];
        });
        new Watcher(vm, RegExp.$1, function (newVal) {
          node.textContent = text.replace(/\{\{(.*)\}\}/, newVal)
        });
        node.textContent = text.replace(/\{\{(.*)\}\}/, val); //Assign the initial value to the node content}
      if (node.nodeType === 1) { //Indicates that it is an element node let nodeAttrs = node.attributes;
        Array.from(nodeAttrs).forEach((item) => {
          if (item.name.indexOf("v-") >= 0) {//Judge whether it is a v-model instruction node.value = vm[item.value]//Assign value to the node}
          //Add subscriber 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) { //This node still has child elements, recursively replace(node);
      }
    })
  }

  //This is because the document on the page is gone, so we need to put the document fragment into the page vm.$el.appendChild(fragment);

}

var uid=0;
//Publish and subscribe function Dep() {
  this.id=uid++;
  this.subs = [];
}
Dep.prototype.addSub = function (sub) { //Subscribe this.subs.push(sub); //Actually what is added is the watcher instance}
Dep.prototype.depend = function () { // Subscription manager if(Dep.target){//Only when Dep.target exists will it be added Dep.target.addDep(this);
  }
}
Dep.prototype.notify = function (sub) { //Publish, traverse the array and let each subscriber's update method execute 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 refers to the current (Watcher) instance let val = vm;
  let arr = exp.split(".");
  arr.forEach((k) => { //get the value of this.obj.text
    val = val[k] // Taking the value of this.obj.text will trigger the get method of data hijacking and add the current subscriber (watcher instance) to the dependency});
  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 () { //This is how each bound method adds an update property let val = this.vm;
  let arr = this.exp.split(".");
  arr.forEach((k) => { 
    val = val[k] //Get the value of this.obj.text and pass it to fn for update operation});
  this.fn(val); // pass a new value}