前言
一、概念
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节点。