实现一个简单的MVVM

此文是对 第二届EConf线上技术分享大会 上《还原vue中的MVVM》部分的再现。

部分用到的API

Object.defineProperty()
Array.from()
Document.createDocumentFragment()
Node.textContent
Node.childNodes
Node.nodeType

要实现的效果

我们要实现的效果是在HTML这样写：

    <div id="app">
      <h1>{{ name }}</h1>
      <div class="article">
        <h2>{{ title }}</h2>
        <span>创建时间：{{ time }}</span>
        <p>{{ content }}</p>
      </div>
    </div>

在JS中这样写：

      const vm = new Vue({
        el: '#app',
        data: {
          name: '我的博客',
          title: '第一篇博客',
          time: '2018-12-10',
          content: '今天发布了我的第一篇博客，非常开心。'
        }
      })

得到渲染效果：

image.png
然而，很遗憾，我们并没有Vue，于是渲染效果是这样的：
image.png
下面我们就动手一步一步实现一个简单的Vue。

实现模板编译

对Vue的使用是通过new运算符来实例化一个对象，所以Vue是一个构造函数，接受一个对象options作为参数

function Vue(options = {}) {

}

在实例化vm之后，对参数options中data下的数据，我们可以用vm[key]（在vm内部通过this[key]，下文不再赘述此种方式）来访问，这是通过Vue代理对data的访问来实现的

function Vue(options = {}) {
    this.$options = options
    this._data = this.$options.data
    for (const key in this._data) {
        Object.defineProperty(this, key, {
            enumerable: true,
            get() {
                return this._data[key]
            },
            set(newVal) {
                this._data[key] = newVal
            }
        })
    }
    new Compile(this.$options.el, this)
}

在构造函数Vue内部，将参数options赋值给实例的$options属性，将options.data赋值给实例的私有属性 _data，然后遍历this._data（即options.data）。在for...in循环中，使用了Object.defineProperty()，其第一个参数是this，所以这个for...in循环实际上是在给实例this添加属性，这些新添加的属性取值时将返回this._data[key]的值，赋值时将改写this._data[key]的值。for...in循环结束，我们就可以通过vm[key]来访问和修改参数data中的数据了。比如可以通过vm.title来取值，通过vm.title=newVal来设值。
在函数的最后，调用了另一个构造函数Compile，并将参数中的el属性和实例this作为其参数，这个Compile构造函数将完成模板编译的工作，它长这个样子

function Compile(el, vm) {
    vm.$el = document.querySelector(el)
    const fragment = document.createDocumentFragment()
    let child = null
    while (child = vm.$el.firstChild) {
        fragment.append(child)
    }
    replace(fragment)
    vm.$el.append(fragment)
    function replace(fragment) {
        const pattern = /\{\{(.*)\}\}/
        Array.from(fragment.childNodes).forEach(node => {
            let text = node.textContent
            if (node.nodeType === 3 && pattern.test(text)) {
                const key = RegExp.$1.trim()
                node.textContent = text.replace(pattern, vm[key])
            }
            if (node.childNodes && node.childNodes.length) {
                replace(node)
            }
        })
    }
}

我们知道vm.$el是Vue实例的dom对象，它就是在这里被定义的。
使用document.createDocumentFragment()创建一个新的空白文档片段，声明一个空变量child，并用while循环将vm.$el下所有子元素（包括文本节点）都移到fragment中去（append一个已经存在于文档中的dom结构，相当于将它从原位置移动到新位置），while循环结束（只要vm.$el.firstChild不为空，循环就会进行下去），vm.$el就成了一个空元素，其所有子元素都被移动到了内存中的fragment下。
接着调用replace函数。replace函数内部声明一个正则，这个正则将匹配形如{{str}}的字符串，并捕获双大括号中的内容（此内容对应data的键名key）。
遍历fragment的子节点，获取子节点的文本内容text，当子节点为文本节点（nodeType为3）且正则匹配成功时，将正则匹配到的内容用对应的vm[key]替换。当子节点不为文本节点时，递归调用replace。在replace函数执行完毕后，fragment中所有形如{{str}}的字符串都被对应的vm[key]替换了，然后将fragment插入vm.$el中，至此，模板编译完成，渲染结果已经是我们想要的了。然而，此时页面并不是响应式的，当渲染完毕，我们通过vm.title=newVal这样的方式来修改data的值时，页面不会更新，所以我们还需要更多的工作要做。

实现响应式

要实现响应式，还需要三个东东

1. 观察者Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2. 订阅者Watcher，能够订阅并收到每个属性变动的通知并执行相应回调函数，从而更新视图
3. Dep，充当eventHub的角色
   这三者的关系是：Observer负责观察数据，当数据发生变化时，通过Dep通知Watcher，Watcher收到数据变动的通知时，能够拿到数据的最新值并执行相应回调更新视图。
   下面实现这三个构造函数

• Dep

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

Dep构造函数实例化的对象具有subs属性，addSub和notify方法。addSub方法将sub添加到subs数组，notify方法遍历subs数组并调用每个子元素sub的update方法（此方法将更新视图）。后文我们将知道，subs数组中的每一个sub，其实就是Watcher的实例。

• Watcher

function Compile(el, vm) {
    //部分代码略
            if (node.nodeType === 3 && pattern.test(text)) {
                const key = RegExp.$1.trim()
                //实例化一个订阅者
                new Watcher(vm, key, (newVal) => {
                    node.textContent = text.replace(pattern, newVal)
                })
                node.textContent = text.replace(pattern, vm[key])
            }
    //部分代码略
}

function Watcher(vm, key, fn) {
    this.vm = vm
    this.key = key
    this.fn = fn
    Dep.target = this
}

Watcher.prototype.update = function() {
    this.fn(this.vm[this.key])
}

Compile函数中当子节点为文本节点且正则匹配成功时，除了替换文本内容外，还必须调用Watcher，传递三个参数，vm, key和fn，vm为当前Vue实例，key为此节点中正则匹配到的key，fn为更新此节点文本内容的回调（需传参）。Watcher函数的最后，将实例this赋值给Dep.target，这个实例将被添加到Dep实例的subs数组中，这一步是在Observer中进行的。

• Observer

function Vue(options = {}) {
    this.$options = options
    this._data = this.$options.data
    //观测数据
    new Observer(this._data)
    //部分代码省略
}

function Observer(data) {
    const dep = new Dep()
    for (const key in data) {
        let val = data[key]
        Object.defineProperty(data, key, {
            enumerable: true,
            get() {
                Dep.target && dep.addSub(Dep.target)
                Dep.target = null
                return val
            },
            set(newVal) {
                if (newVal === val) {
                    return
                }
                val = newVal
                dep.notify()
            }
        })
    }
}

要实现响应式，就需要Observer观察数据。在Vue中实例化一个观察者对象观测this._data，遍历this._data进行数据劫持，在取值时将Dep.target添加到dep.subs中（Dep.target是Compile中调用Watcher生成的实例对象）；在设值成功时（值相同会直接返回），会调用dep的notify方法，notify方法会遍历subs数组并调用其中每个Watcher实例的update方法（update方法定义在Watcher原型上，并通过this.vm[this.key]拿到最新的数据以更新视图）。至此，这个简单的MVVM框架就完成了。（Observer中省去了对参数data做判断，data必须为对象）
效果预览
完整代码