此文是对 第二届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: '今天发布了我的第一篇博客，非常开心。'
}
})
得到渲染效果：
然而，很遗憾，我们并没有Vue，于是渲染效果是这样的：
下面我们就动手一步一步实现一个简单的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的值时，页面不会更新，所以我们还需要更多的工作要做。
实现响应式
要实现响应式，还需要三个东东
- 观察者Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
- 订阅者Watcher，能够订阅并收到每个属性变动的通知并执行相应回调函数，从而更新视图
-
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必须为对象）
效果预览
完整代码
