Vue-双向数据绑定的实现

前言

一、概念

Vue的双向绑定，指的是在MVVM模型中：
1. 从model数据模型（包括初次数据的渲染） => view视图的更新；
2. 从view视图(比如用户操作） => model数据模型的更新。

二、思路

1.

以Object.defineProperty() 为核心，实现modal更新时的数据拦截；
modal更新时采用观察者模式，实现一对多，从modal到多个view的数据更新。

2.

在编译函数中，对双向绑定的node节点（view）使用addEventListener() 添加事件监听，在回调实现对modal的更新。

实现

一、用例

<div id="app">
  <input type="text" v-model="text" />
  {{ text }}
</div>
<script>
	var vm = new Vue({
	  el: '#app',
	  data: {
	    text: 'hello world'
	  }
	})
</script>

二、分步实现

此部分按代码执行逻辑从上到下，需要注意的是，Dep和Watcher构造函数的实现应该在new Vue()之前，简化起见，仅实现v-model和{{xx}}的数据双向绑定。

1.实现Vue构造函数

// Vue构造函数
function Vue(options) {
  var data = options.data
  this.data = data

  // 将data属性添加到vm实例上，对vm实例属性实现响应式监听属性
  reactiveRegister(data, this)

  var el = options.el
  // 获取dom
  var dom = document.querySelector(el)
  // 将dom转换为fragmentDom
  var fragmentDom = nodeToFragment(dom, this)
  dom.appendChild(fragmentDom)
}

2.实现reactiveRegister()响应式监听

// 将data属性遍历，调用defineReactive()
function reactiveRegister(obj, vm) {
  for (let key of Object.keys(obj)) {
    defineReactive(vm, key, obj[key])
  }
}

// 实现view => model，核心Object.defineProperty
function defineReactive(obj, key, value) {
  var dep = new Dep()
  Object.defineProperty(obj, key, {
    get: function() {
      // 当模板编译{{xx}}时才会触发，进if，Dep.target为Watcher实例对象，下文会实现
      if (Dep.target) {
        // 将Watcher实例加到订阅中心，订阅中心需要通知的方法由该实例自己提供
        dep.addSub(Dep.target)
      }
      return value
    },
    set: function(newVal) {
      if (newVal === value) {
        return
      }
      value = newVal

      // 更新时进行通知
      dep.subs.length && dep.notify()
    }
  })
}

3.实现观察者模式Dep订阅中心、Watcher观察者

// Dep构造函数
function Dep() {
  this.subs = [] // 存放订阅列表
}
Dep.prototype = {
  addSub: function (sub) {
    this.subs.push(sub)
  },
  notify: function () {
    this.subs.forEach(sub => {
      sub.update() // 每个sub都是一个Watcher实例
    })
  }
}

// Watcher观察者构造函数
function Watcher(vm, node, name) {
  Dep.target = this
  this.vm = vm
  this.node = node
  this.name = name
  // 构造函数内手动执行update()方法，触发vm的get，Dep.target不为空，而是this指向Watcher实例，于是添加主题到订阅列表
  this.update()
  Dep.target = null
}
Watcher.prototype = {
  update() {
    this.get()
    this.node.nodeValue = this.value // 更新fragmentDom
  },
  get() {
    this.value = this.vm[this.name] // 触发vm get
  }
}

4.实现nodeToFragment()将dom转换为fragmentDom

// 通过documentFragment劫持dom
function nodeToFragment(node, vm) {
  var fragment = document.createDocumentFragment()
  var child
  while (child = node.firstChild) {
    // 调用解析模板方法，将vm实例变量更新到文档
    compile(child, vm)
    // 需要注意的是，documentFragment添加子节点后child，child本身会从dom子节点移除
    fragment.appendChild(child)
  }
  return fragment
}

5.实现compile()解析模板

// 根据vm实例数据，更新劫持过来的碎片化文档节点
function compile(node , vm) {
  var reg = /\{\{(.*)\}\}/ //匹配 {{ xx }}
  // 简单处理例子，仅区分元素节点和文本节点，完整的实现请参考Vue源码
  if (node.nodeType === 1) {
    var attr = node.attributes // attr是属性节点组成的数组
    var length = attr.length
    for (let i = 0; i < length; i++) {
      if (attr[i].nodeName === 'v-model') {
        var name = attr[i].nodeValue // 获取vm实例变量名
        node.addEventListener('input', e => {
          vm[name] = e.target.value
        })
        node.value = vm[name] // 将vm实例变量值更新到文档节点
        node.removeAttribute('v-model')
      }
    }
  }
  if (node.nodeType === 3) {
    if (reg.test(node.nodeValue)) {
      var name = RegExp.$1 // 获取正则匹配到的vm实例变量名
      name = name.trim()
      // node.nodeValue = vm[name] // 将vm实例变量值更新到文档节点
      // 此处不应一次性赋值，而是采用观察者模式，每次都能更新
      new Watcher(vm, node, name)
    }
  }
}

总结

1、 从new Vue()构造函数开始，将options赋值给新创建vm实例对象；

2、 遍历data，将其属性添加到vm实例上，并用Object.defineProperty实现get和set；

· 2.1、采用观察者设计模式，实例化Dep()发布中心；

· 2.2、Dep()构造函数实现订阅列表，原型上实现：addSub()：添加订阅，notify()：通知已订阅观察者，这两个方法；

· 2.3、在get内判断watcher实例是否需要订阅，判断办法和Watcher实现见3.3；

· 2.4、在set内实现对dep实例notify()方法的调用，通知get内订阅的watcher进行更新。

3、 劫持options.el所指的dom元素，使用document.createDocumentFragment()将其子节点转换为DocumentFragment（碎片化文档）,期间（转换之前），对每个节点进行解析compile()；

· 3.1、如果是v-model指令，通过addEventListener()注册并监听事件，回调内实现对view=>model的更新；

· 3.2、如果是{{xx}}，new Watcher()将xx变量名传入构造函数实例化观察者对象，因为一个xx变量可能在dom中多次使用，所以从model=>view是一对多的更新；

· 3.3、Watcher()构造函数内，通过Dep.target存储当前watcher实例对象，原型上实现update()：更新fragmentDom节点数据，get()：获取vm实例变量触发vm变量的get，在vm的get内订阅Dep.target（当new Watcher()首次触发get，Dep.target不为null，后续更新vm变量触发set和get不再订阅）。

4、 将DocumentFragment插入到原dom节点。