实现原理

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

• Observer 对所有数据的属性进行监听
• Compile 对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数
• Watcher 作为连接Observer 跟 Compile 之间的桥梁, 能够订阅接收到每个属性变动的通知,执行相应的回调函数

模拟实现

const  Dep  =  function ()  {
  this.subs =  [];
};
Dep.prototype =  {
  addSub: function (sub)  {
    this.subs.push (sub);
  },
  notify: function () {
    this.subs.forEach(sub  =>  {
      sub.update();
    });
  },
};

const Watcher = function (vm, node, name) {
  Dep.target =  this;
  this.name = name;
  this.node = node;
  this.vm = vm;
  this.update();
  Dep.target =  null;
};

Watcher.prototype =  {

  update: function ()  {
    this.get();
    this.node.nodeValue =  this.value;
  },

  get: function ()  {
    this.value =  this.vm[this.name];
  },

};

const compile =  function  (node, vm)  {

  if  (node.nodeType ===  1)  {

    let attr = node.attributes;

    for  (let i =  0; i < attr.length; i++)  {

      if  (attr[i].nodeName ===  'v-model')  {

        let name = attr[i].nodeValue;

        node.addEventListener('input', e =>  {
          vm[name]  = node.value;
        });

        node.value = vm[name];

        node.removeAttribute ('v-model');

      }

    }

  }

  // Text 节点类型
  if  (node.nodeType ===  3)  {

    if  (/\{\{(.*)\}\}/.test (node.nodeValue))  {

      let name =  RegExp.$1;

      name = name.trim();

      node.nodeValue = vm[name];

      new  Watcher(vm, node, name);

    }

  }

};

const observe = data =>  {

  if  (!data ||  typeof data !==  'object')  return;

  Object.keys(data).forEach (key => defineReactive(data, key, data[key]));

};

const defineReactive =  (data, key, value)  =>  {

  const dep =  new  Dep();

  observe (value);

  Object.defineProperty (data, key,  {

    get:  function  () {

      if(Dep.target) dep.addSub(Dep.target);

      return value;

    },

    set:  function  (newValue)  {

      console.log(数据已发生变化，新的值为${newValue});

      value = newValue;

      dep.notify();

    },

  });

};

function nodeToFragment (node, vm)  {

  let flag = document.createDocumentFragment();

  let child;

  while((child = node.firstChild))  {

    compile(child, vm);

    flag.appendChild(child); 

  }

  return flag;

}

function  Vue(options)  {

  let data =  this.data = options.data;

  observe(data,  this);

  let id = options.el;

  let dom = nodeToFragment(document.getElementById(id), data);

  document.getElementById(id).appendChild(dom);

}

let vm =  new  Vue({
  el:  'app',
  data:  {
    text:  'example text',
  },
});