1.MVVM是什么？

响应式，双向数据绑定，即MVVM。是指数据层（Model）-视图层（View）-数据视图（ViewModel）的响应式框架。它包括：

1.修改View层，Model对应数据发生变化。

2.Model数据变化，不需要查找DOM，直接更新View。

2.MVVM的实现方式

（1）发布者-订阅者模式: 一般通过sub, pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是 vm.set('property', value)。

（2）脏值检查: angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，在指定的事件触发时进入脏值检测。

（3）数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

3.思路

1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者

2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数

3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图

4、mvvm入口函数，整合以上三者

如下图：

4.实现Observer

写个简单的observer，监听对象的每一个属性的变化

	const data = {a: 1,b: 2,c: {d: 4}}observer(data)data.c.d = 5// 观察者，遍历监听所有数据function observer(data) {if(!data || typeof data!=='object')returnfor (let key in data) {observeProperty(data, key, data[key])}}// 观察属性变化function observeProperty(data, key, val) {observer(val) // 递归监听子属性Object.defineProperty(data, key, {enumerable: true, // 可枚举configurable: false, // 不能再defineget() {console.log('you get it')return val},set(newval) {console.log('new:' + key, newval)console.log('old:' + key, 1)val = newval}})}

监听到变化之后，需要实现一个消息订阅器，很简单，维护一个数组，用来收集订阅者，数据变动触发notify，再调用订阅者的update方法，代码改善之后是这样：

// ...
// 观察属性变化function observeProperty(data, key, val) {const dep = new Dep()observer(val) // 递归监听子属性Object.defineProperty(data, key, {// ...set(newval) {if(val === newval)returnconsole.log('new:' + key, newval)console.log('old:' + key, 1)val = newvaldep.notify() // 通知所有订阅者}})}
// 订阅器类class Dep{constructor(){this.subs = [] // 存储所有订阅者，也就是Watcher}addSub(sub){ // 新增订阅者this.subs.push(sub)}notify(){ // 通知所有订阅者，更新数据this.subs.forEach(sub=>{sub.update()})}}

通过思路图可知，这里的订阅者是指Watcher。

// Observer.js
Object.defineProperty(data, key, {// ...get() {console.log('you get it')// 当Dep.target不为空时，添加当前watcher, 添加完移除Dep.target && dep.addSub(Dep.target);return val}
})// Watcher.js
Watcher.prototype = {get(key) {Dep.target = this;this.value = data[key];    // 这里会触发属性的getter，从而添加订阅者Dep.target = null;}
}

Dep.target 表示当前正在计算的 Watcher，它是全局唯一的，因为在同一时间只能有一个 Watcher 被计算。

5.实现Compile

compile主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图，如图所示：

因为遍历解析的过程有多次操作dom节点，为提高性能和效率，会先将跟节点el转换成文档碎片fragment进行解析编译操作，解析完成，再将fragment添加回原来的真实dom节点中。

class Compile {constructor(el, vm) {this.$vm = vmthis.$el = this.isElementNode(el) ? el : document.querySelector(el)if (this.$el) {// 把模板内容放入内存(片段)this.$fragment = this.node2Fragment(this.$el)// 解析模板this.init()// 把内存的结果返回页面this.$el.appendChild(this.$fragment)}}init() {this.compile(this.$fragment)}node2Fragment(el) { // 将节点解析成片段const fragment = document.createDocumentFragment()while (child = el.firstChild) {// fragment有个特点，它每appendChild一个节点，该节点在dom上被删除fragment.appendChild(child)}return fragment}compile(el) {const childNodes = el.childNodes;[].slice.call(childNodes).forEach((node) => {const text = node.textContentconst reg = /\{\{(.*)\}\}/if (this.isElementNode(node)) { //属性节点this.compileElement(node)} else if (this.isTextNode(node) && reg.test(text)) { //文本节点this.compileText(node, RegExp.$1)}// 递归遍历编译子节点if (node.childNodes && node.childNodes.length) {this.compile(node)}})}compileElement(node) {const nodeAttrs = node.attributes;[].slice.call(nodeAttrs).forEach(attr => {// 规定：指令以 v-xxx 命名// 如 <span v-text="content1"></span> 中指令为 v-textconst attrName = attr.name // v-textif (this.isDerective(attrName)) {const exp = attr.value // content1const dir = attrName.substring(2) // textif (this.isEventDirective(dir)) {// 事件指令, 如 v-on:clickcompileUtil.eventHandler(node, this.$vm, exp, dir)} else {// 普通指令compileUtil[dir] && compileUtil[dir](node, this.$vm, exp)}}})}compileText(node, exp) {compileUtil.text(node, this.vm, exp)}isElementNode(node) {return node.nodeType === 1}isTextNode(node) {return node.nodeType === 3}isDerective(attrName) {return attrName.indexOf('v-') >= 0}isEventDirective(attrName) {return attrName.indexOf('on') >= 0}}

compile方法将遍历所有节点及其子节点，进行扫描解析编译，调用对应的指令渲染函数进行数据渲染，并调用对应的指令更新函数进行绑定。本文举text，model和事件注册三个例子来说明，更新函数代码如下：

const compileUtil = {text(node, vm, exp) {this.bind(node, vm, exp, 'text')},model(node, vm, exp) {this.bind(node, vm, exp, 'model')node.addEventListener('input',e=>{// 视图的变化更新到vm实例vm.$data[exp]= e.target.value})},bind(node, vm, exp, dir) {const updaterFn = updater[dir + 'Updater']// 初始化视图updaterFn && updaterFn(node, vm[exp])// 实例化订阅者，此操作会在对应的属性消息订阅器中添加该订阅者watchernew Watcher(vm, exp, (value, oldValue) => {updaterFn && updaterFn(node, value, oldValue)})},// 注册事件eventHandler(node,vm,exp,dir){// dir  on:clickconst eventType = dir.split(':')[1]const fn = vm.$options.methods && vm.$options.methods[exp]if(eventType&&fn){node.addEventListener(eventType,fn.bind(vm))}}}// 更新函数const updater = {textUpdater(node, value) {node.textContent = typeof value === 'undefined' ? '' : value},modelUpdater(node, value) {node.value = typeof value === 'undefined' ? '' : value}}

至此，视图和数据已经绑定成功，页面的初始化渲染由vm实例的属性初始化完成，并对节点上的事件进行了注册，接下了就是Watcher的事了。它将接受数据的变化，并重新更新视图。

其中，双向绑定由v-model实现，初始化时调用modelUpdater对input中的value初始化赋值，然后添加input事件监听，当视图层的数据变化后，更新vm实例上对应属性的值。

6.实现Watcher

Watcher订阅者作为Observer和Compile之间通信的桥梁，主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个update()方法

3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

class Watcher {constructor(vm, exp, cb) {this.vm = vmthis.exp = expthis.cb = cbthis.value = this.get() // 缓存当前值（旧值）}get() {Dep.target = this // 将当前订阅者指向自己const value = this.vm[this.exp] // 触发getter，添加自己到属性订阅器中Dep.target = null // 添加完毕，重置return value}update() {this.run()}run() {const value = this.get() // 获取新值const oldValue = this.valueif (value !== oldValue) {this.value = valuethis.cb.call(this.vm, value, oldValue) // 执行Compile中绑定的回调，更新视图}}}// 这里再次列出Observer和Dep，方便理解Object.defineProperty(data, key, {get() {Dep.target && dep.addSub(Dep.target)return val}})Dep.prototype = {notify() {this.sbus.forEach(sub => sub.update())}}

实例化Watcher的时候，调用get()方法，通过Dep.target = watcherInstance标记订阅者是当前watcher实例，强行触发属性定义的getter方法，getter方法执行的时候，就会在属性的订阅器dep添加当前watcher实例，从而在属性值有变化的时候，watcherInstance就能收到更新通知。

7.实现MVVM

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

class MVVM {constructor(options) {this.$options = optionsthis.$el = options.elthis.$data = options.data// 属性代理，实现 vm.xxx -> vm._data.xxxfor (let key in this.$data) {this.$proxy(key)}observer(this.$data)this.$compile = new Compile(this.$el || document.body, this)}$proxy(key) {Object.defineProperty(this, key, {configurable: false,enumerable: true,get() {return this.$data[key]},set(newVal) {this.$data[key] = newVal}})}}

参考文章：

Vue实现双向数据绑定

手写MVVM

Object的defineProperty