18 vue 实例及其双向绑定的实现原理

目录

一个vue实例
生命周期钩子函数
set/get 访问器属性的实现
v-model属性与{{text}}在模板中是如何被解析的？
观察者模式
源码

<div id="app">
 <input type="text" v-model="text">
 {{ text }}
</div>
...
let vm = new Vue({
  el: '#app',
  data:()=>({
      text:'hi'
  }),
  created () {
    console.log(this.text)
  }
})

observe(data, this);
// 循环设置每一个属性
function observe (obj, vm) {
  Object.keys(obj).forEach(function (key) {
    defineReactive(vm, key, obj[key]);
  })
}
// data对象中的属性，被解析并定义在了vm上
// 此处obj = vm
function defineReactive (obj, key, val) {
  // 此时监听器是属于单个属性的，一个属性一个监听器
  var dep = new Dep();

  Object.defineProperty(obj, key, {
    get: function () {
      // 添加订阅者 watcher 到主题对象 Dep
      if (Dep.target) dep.addSub(Dep.target);
      return val
    },
    set: function (newVal) {
      if (newVal === val) return
      val = newVal;
      // 作为发布者发出通知
      // 当用户在input处输入内容后，触发data变量的set更新
      // 进而触发Watcher.update调用
      dep.notify();
    }
  });
}

var dom = nodeToFragment(document.getElementById(id), this);
// 编译完成后，将 dom 返回到 app 中
document.getElementById(id).appendChild(dom); 
...
function nodeToFragment (node, vm) {
  var flag = document.createDocumentFragment();
  var child;
  while (child = node.firstChild) {
    // 转化是为了调用 compile，解析template内容
    compile(child, vm);
    flag.appendChild(child); // 将子节点劫持到文档片段中
  }
  return flag
}
...
function compile (node, vm) {
  var reg = /\{\{(.*)\}\}/;
  // 节点类型为元素
  if (node.nodeType === 1) {
    var attr = node.attributes;
    // 解析属性
    for (var i = 0; i < attr.length; i++) {
      if (attr[i].nodeName == 'v-model') {
        var name = attr[i].nodeValue; // 获取 v-model 绑定的属性名
        node.addEventListener('input', function (e) {
          // 给相应的 data 属性赋值，进而触发该属性的 set 方法
          //
          vm[name] = e.target.value;
        });
        // 单就本示例而言，这行代码与下面的Watcher做的工作是重复的
        // node.value = vm[name]; // 将 data 的值赋给该 node
        node.removeAttribute('v-model');
      }
    };
    // 传递input、text类型，是为了区别更新的属性名称
    new Watcher(vm, node, name, 'input');
  }
  // 节点类型为 text
  if (node.nodeType === 3) {
    if (reg.test(node.nodeValue)) {
      var name = RegExp.$1; // 获取匹配到的字符串
      name = name.trim();

      new Watcher(vm, node, name, 'text');
    }
  }
}

function Watcher (vm, node, name, nodeType) {
  // 只有在编译阶段，Dep.target才不为null
  // this等于Watcher实例
  Dep.target = this;
  this.name = name;
  this.node = node;
  this.vm = vm;
  this.nodeType = nodeType;
  // update间接调用了vm的访问器get,在那里注册了data变量变化的监听
  this.update();
  // target设置为null，只有编译时添加监听一次
  Dep.target = null;
}
Watcher.prototype = {
  // 数据变化时，仍会调用
  update: function () {
    this.get();
    if (this.nodeType == 'text') {
      // nodeValue是{{xxx}}节点文本值
      this.node.nodeValue = this.value;
    }
    if (this.nodeType == 'input') {
      // value指input的value
      // 这里仅处理示例中的有限指令
      this.node.value = this.value;
    }
  },
  // 获取 data 中的属性值
  get: function () {
    this.value = this.vm[this.name]; // 触发相应属性的 get
  }
}