使用Vue有一段时间了，每当面试时问起双向数据绑定原理时，好像除了会说使用Object.defineProperty除外，别的就不了解，至于如何解析指令，以及内部到底做了什么更是知之甚少，最近在拉钩教育跟着老师学习，才更清晰的知道内部大概是如何操作的。
通过封装Vue，来学习内部响应式原理：
封装Vue首先创建Vue类：
class Vue {
constructor(options) {
//1 通过属性保存选项的数据
this.$options = options || {}
this.$data = options.data || {}
//判断el是字符串还是dom对象
this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
//2 把data中的成员转换成getter和seter，注入到vue实例中
this._proxyData(this.$data)
//3 调用observer对象，监听数据的变化
new Observer(this.$data)
//4 调用compiler对象，解析指令和差值表达式
new Compiler(this)
}
_proxyData(data) {
//遍历data中的所有属性
Object.keys(data).forEach(key => {
//把data的属性注入到vue实例中
Object.defineProperty(this, key, {
enumerable: true,
configurable: true,
get() {
return data[key]
},
set(newValue) {
if (newValue === data[key]) {
return
}
data[key] = newValue
}
})
})
}
}
创建Observer 用来监听数据变化：
class Observer {
constructor(data) {
this.walk(data)
}
walk(data) {
//1 判断data是否是对象
if (!data || typeof data !== 'object') {
return
}
//2 遍历data对象的所有属性
Object.keys(data).forEach(key => {
this.defineReactive(data, key, data[key])
})
}
defineReactive(obj, key, val) {
let that = this
//创建dep对象 负责收集依赖 并发送通知
let dep = new Dep()
//如果val是对象，把val内部的属性转换成响应式数据
this.walk(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get() {
//收集依赖
Dep.target && dep.addSub(Dep.target)
return val
},
set(newValue) {
if (newValue === val) {
return
}
val = newValue
//判断新赋值是否是对象 是对象对象属性转换成响应式数据
that.walk(newValue)
//发送通知
dep.notify()
}
})
}
}
创建Compiler类，用于解析指令更新视图：
class Compiler {
constructor(vm) {
this.el = vm.$el
this.vm = vm
this.compile(this.el)
}
//编译模板 处理文本节点和元素节点
compile(el) {
let childNodes = el.childNodes
Array.from(childNodes).forEach(node => {
if (this.isTextNode(node)) {
//处理文本节点
this.compileText(node)
} else if (this.isElementNode(node)) {
//处理元素节点
this.compileElement(node)
}
//判断node节点，是否有子节点，如果有子节点，要递归调用compile
if (node.childNodes && node.childNodes.length) {
this.compile(node)
}
})
}
//编译元素节点 处理指令
compileElement(node) {
// console.log(node.attributes);
//遍历所有属性节点
Array.from(node.attributes).forEach(attr => {
//判断是否是指令
let attrName = attr.name
if (this.isDirective(attrName)) {
//v-text --> text
attrName = attrName.substr(2)
let key = attr.value
this.update(node, key, attrName)
}
})
}
update(node, key, attrName) {
//根据指令是否有冒号 判断是否事件指令
const attrNameTemp = attrName.split(':')
if(attrNameTemp&&!attrNameTemp[1]){
let updateFn = this[attrName + 'Updater']
updateFn && updateFn.call(this, node, this.vm[key], key)
}else{
this.onUpdater.call(this, node, this.vm.$options.methods[key], attrNameTemp[1])
}
}
//处理 v-text 指令
textUpdater(node, value, key) {
node.textContent = value
//创建watcher对象，当数据改变更新视图
new Watcher(this.vm, key, (newValue) => {
node.textContent = newValue
})
}
//v-model
modelUpdater(node, value, key) {
node.value = value
//创建watcher对象，当数据改变更新视图
new Watcher(this.vm, key, (newValue) => {
node.value = newValue
})
//双向绑定
node.addEventListener('input', () => {
this.vm[key] = node.value
})
}
//v-html
htmlUpdater(node, value, key) {
node.innerHTML = value
//创建watcher对象，当数据改变更新视图
new Watcher(this.vm, key, (newValue) => {
node.innerHTML = newValue
})
}
//v-on
onUpdater(node, fn, eventType) {
console.log(node, fn, eventType,this.vm);
window.addEventListener(eventType, () => {
fn.call(this.vm)
});
}
//编译文本节点 处理差值表达式
compileText(node) {
//{{ msg }} 匹配差值表达式
let reg = /\{\{(.+?)\}\}/
let value = node.textContent
if (reg.test(value)) {
let key = RegExp.$1.trim()
node.textContent = value.replace(reg, this.vm[key])
//创建watcher对象，当数据改变更新视图
new Watcher(this.vm, key, (newValue) => {
node.textContent = newValue
})
}
}
//判断元素属性是否是指令
isDirective(attrName) {
return attrName.startsWith('v-')
}
//判断节点是否是文本节点
isTextNode(node) {
return node.nodeType === 3
}
//判断节点是否是元素节点
isElementNode(node) {
return node.nodeType === 1
}
}
可以看到在Observer类中有创建了一个new Dep()实例，它的作用是负责收集依赖 并发送通知，下面让我们创建这个类：
class Dep {
constructor() {
//存储所有的观察者
this.subs = []
}
// 添加观察者
addSub(sub) {
if (sub && sub.update) {
this.subs.push(sub)
}
}
//发送通知
notify() {
this.subs.forEach(sub => {
sub.update()
})
}
}
可以看到Dep内部实现很简单，添加观察者和发送通知，当然Vue源码中还有删除等一系列复杂操作，我们在这先不研究，主要了解双向数据绑定其大概流程是如何进行，既然收集的是观察者，那就需要创建一个观察者类：
class Watcher {
constructor(vm, key, cb) {
this.vm = vm
//data中的属性名称
this.key = key
//回调函数负责更新视图
this.cb = cb
// 把watcher对象记录到Dep类的静态属性target中
Dep.target = this
//触发get方法，在get方法中会调用addSub
this.oldValue = vm[key]
Dep.target = null
}
//当数据发生变化的时候更新视图
update() {
let newValue = this.vm[this.key]
if (this.oldValue === newValue) {
return
}
this.cb(newValue)
}
}
只看代码可能有点不是很理解，以下是整个流程图，然后再结合代码，理解起来会更好一些：
其流程是首先通过 Observer 劫持监听所有属性（Vue data)，Compiler 编译解析指令，Dep 收集 Watcher（观察者），而在初始化指令时绑定 Watcher ,触发数据的get方法，Obeserver get函数通过创建的Dep收集Watcher。当数据发送变化时，Obeserver监听数据变化，触发 set 函数通知Dep发送通知，Dep遍历所有 Watcher 触发其update 函数，Compiler 指令中的 Watcher 会执行其回调函数，然后更新视图变化。
* 这块有个需要注意的地方，我们看通过Observer劫持监听所有属性，是在创建Vue实例时劫持监听的，而当创建完Vue实例后，新创建的属性，不是响应式数据，所以Vue有一个 Vue.set(object, key, value)方法来把后面创建的新属性设置成响应式数据，其内部原理也是通过调用Observer中defineReactive方法设置成响应数据，然后更新视图。
通过封装一个简单的Vue实例，我想应该大概对其中的双向数据绑定原理有了更深刻的认识，对以后的工作中Vue的使用会有一定的提升。
