简单双向绑定代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two-way data-binding</title>
</head>
<body>
<div id="app">
<input type="text" v-model="text">
{{ text }}
</div>
<script>
function observe (obj, vm) {
Object.keys(obj).forEach(function (key) {
defineReactive(vm, key, obj[key]);
});
}
function defineReactive (obj, key, val) {
var dep = new Dep();
Object.defineProperty(obj, key, {
get: function () {
// 添加订阅者watcher到主题对象Dep
if (Dep.target) dep.addSub(Dep.target);
return val
},
set: function (newVal) {
if (newVal === val) return
val = newVal;
// 作为发布者发出通知
dep.notify();
}
});
}
function nodeToFragment (node, vm) {
var flag = document.createDocumentFragment();
var child;
while (child = node.firstChild) {
compile(child, vm);
flag.appendChild(child); // 将子节点劫持到文档片段中
}
return flag;
}
function compile (node, vm) {
var reg = /\{\{(.*)\}\}/;
// 节点类型为元素
if (node.nodeType === 1) {
var attr = node.attributes;
// 解析属性
for (var i = 0; i < attr.length; i++) {
if (attr[i].nodeName == 'v-model') {
var name = attr[i].nodeValue; // 获取v-model绑定的属性名
node.addEventListener('input', function (e) {
// 给相应的data属性赋值，进而触发该属性的set方法
vm[name] = e.target.value;
});
node.value = vm[name]; // 将data的值赋给该node
node.removeAttribute('v-model');
}
};
new Watcher(vm, node, name, 'input');
}
// 节点类型为text
if (node.nodeType === 3) {
if (reg.test(node.nodeValue)) {
var name = RegExp.$1; // 获取匹配到的字符串
name = name.trim();
new Watcher(vm, node, name, 'text');
}
}
}
function Watcher (vm, node, name, nodeType) {
Dep.target = this;
this.name = name;
this.node = node;
this.vm = vm;
this.nodeType = nodeType;
this.update();
Dep.target = null;
}
Watcher.prototype = {
update: function () {
this.get();
if (this.nodeType == 'text') {
this.node.nodeValue = this.value;
}
if (this.nodeType == 'input') {
this.node.value = this.value;
}
},
// 获取data中的属性值
get: function () {
this.value = this.vm[this.name]; // 触发相应属性的get
}
}
function Dep () {
this.subs = []
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
notify: function() {
this.subs.forEach(function(sub) {
sub.update();
});
}
};
function Vue (options) {
this.data = options.data;
var data = this.data;
observe(data, this);
var id = options.el;
var dom = nodeToFragment(document.getElementById(id), this);
// 编译完成后，将dom返回到app中
document.getElementById(id).appendChild(dom);
}
var vm = new Vue({
el: 'app',
data: {
text: 'hello world'
}
});
</script>
</body>
</html>
demo地址
deom 其实没有，你们自己拷贝代码到本地跑一下吧。
分析
我们以两个方面来分析，一个是View到data，就是在这个代码里当你在input里面修改值的时候，data里面text的值也会变化。
另一个是data到view，就是当你调整text的值的时候view上对应的部分也会变化。
vue的双向绑定是基于Object.defineProperty实现的，请读者先自行了解一下。
data到view的绑定
data到view就是数据变化会渲染到视图上，也就是代码中的text变化会改变div内{{text}}的显示。
这一部分分几个步骤
- 首先是最初渲染的时候将数据渲染到视图上
- 其次是监听数据的变动，变动后通知view更新
最初渲染
我们先来看看构造函数里面
function Vue (options) {
this.data = options.data;
var data = this.data;
observe(data, this);
var id = options.el;
var dom = nodeToFragment(document.getElementById(id), this);
// 编译完成后，将dom返回到app中
document.getElementById(id).appendChild(dom);
}
初始化的时候有一句
var dom = nodeToFragment(document.getElementById(id), this);
document.getElementById(id).appendChild(dom);
这一句话实现初始化的时候将数据渲染到视图上，现在我们进nodeToFragment里面看看
function nodeToFragment (node, vm) {
var flag = document.createDocumentFragment();
var child;
while (child = node.firstChild) {
compile(child, vm);
flag.appendChild(child); // 将子节点劫持到文档片段中
}
return flag;
}
这里可以注意到的是使用了一个createDocumentFragment
这里我们插入一下，这个东西创建的文档碎片最后还是用appendChild插入了，那么为什么要用这个？其实是出于性能的考虑
我们先回顾一下一旦把节点插入到文档流会发生什么，我们了解到当需要对页面DOM进行操作的时候必然会导致多次 重绘、回流(repaint, reflow)。这里顺便附一下我的另一个博客重绘与回流(repaint and reflow) -- 前端性能(梁王的理论自习室)
我们可以知道，在更新少量节点的时候可以之间向document.body节点中添加，但是当要向document中添加大量数据是，如果逐个添加这些新节点，这个过程非常缓慢，因为每添加一个节点都会调用父节点的appendChild()方法产生一次回流和重绘，为了提高性能，可以使用一个文档碎片，把所有的新节点附加其上，然后把文档碎片一次性添加到document中，减少了重新渲染的次数提高了性能。
让我们回到代码，下面遍历node的节点
while (child = node.firstChild) {
compile(child, vm);
flag.appendChild(child); // 将子节点劫持到文档片段中
}
其实刚开始看这个我有点疑惑这个循环的写法，为啥是child = node.firstChild，不过后来我才知道appendChild是把一个节点给"移"到flag上，也就是说移动之后node里面就没有这个child节点了，所以这样可以遍历node的所有孩子并把它们都移到文档碎片flag上。
`
不过移动之前我们先看一下compile的内容
function compile (node, vm) {
var reg = /\{\{(.*)\}\}/;
// 节点类型为元素
if (node.nodeType === 1) {
var attr = node.attributes;
// 解析属性
for (var i = 0; i < attr.length; i++) {
if (attr[i].nodeName == 'v-model') {
var name = attr[i].nodeValue; // 获取v-model绑定的属性名
node.addEventListener('input', function (e) {
// 给相应的data属性赋值，进而触发该属性的set方法
vm[name] = e.target.value;
});
node.value = vm[name]; // 将data的值赋给该node
node.removeAttribute('v-model');
}
};
new Watcher(vm, node, name, 'input');
}
// 节点类型为text
if (node.nodeType === 3) {
if (reg.test(node.nodeValue)) {
var name = RegExp.$1; // 获取匹配到的字符串
name = name.trim();
new Watcher(vm, node, name, 'text');
}
}
}
首先有个nodeType，这个可以去MDN看
nodeType.png
代码里面主要用的只有1和3
如果是元素比如<p> <div>等
var attr = node.attributes;
// 解析属性
for (var i = 0; i < attr.length; i++) {
if (attr[i].nodeName == 'v-model') {
var name = attr[i].nodeValue; // 获取v-model绑定的属性名
node.addEventListener('input', function (e) {
// 给相应的data属性赋值，进而触发该属性的set方法
vm[name] = e.target.value;
});
node.value = vm[name]; // 将data的值赋给该node
node.removeAttribute('v-model');
}
};
new Watcher(vm, node, name, 'input');
这里主要是view到data的部分我们先略过，我们主要看new Watcher这里，不过这里我们先不进Watcher里面看，现在先回到vue构造函数里面。
function Vue (options) {
this.data = options.data;
var data = this.data;
observe(data, this);
var id = options.el;
var dom = nodeToFragment(document.getElementById(id), this);
// 编译完成后，将dom返回到app中
document.getElementById(id).appendChild(dom);
}
在nodeToFragment之前我们有个observe(data,this)
我们先来看看这货
function observe (obj, vm) {
Object.keys(obj).forEach(function (key) {
defineReactive(vm, key, obj[key]);
});
}
function defineReactive (obj, key, val) {
var dep = new Dep();
Object.defineProperty(obj, key, {
get: function () {
// 添加订阅者watcher到主题对象Dep
if (Dep.target) dep.addSub(Dep.target);
return val
},
set: function (newVal) {
if (newVal === val) return
val = newVal;
// 作为发布者发出通知
dep.notify();
}
});
}
observe遍历data对象里面的所有属性，然后调用了一个defineReactive，这个函数很关键，现在我们来分析一下这个函数
function defineReactive (obj, key, val) {
var dep = new Dep();
Object.defineProperty(obj, key, {
get: function () {
// 添加订阅者watcher到主题对象Dep
if (Dep.target) dep.addSub(Dep.target);
return val
},
set: function (newVal) {
if (newVal === val) return
val = newVal;
// 作为发布者发出通知
dep.notify();
}
});
}
我们知道，vue实现双向绑定里面一个核心就是使用了ES5的Object.defineProperty，对于这个方法请读者自行阅读文档，这里我只能范范的说当我调用这个方法设置了一个obj的对应key属性的get和set的时候，当我代码里面出现了比如说 var b = o.h的时候，get就会被调用，而当我写了o.h = 123的时候，set就会被调用
这里给个实验代码，读者可以去控制台试试Object.defineProperty
var _keke = {a: 'lwio'}
var o = {}
Object.defineProperty(o, 'h', {
get: function () {
console.log('o.h has been got');
return _keke.a;
},
set: function (newVal) {
console.log('o.h has been assigned');
_keke.a = newVal;
}
})
o.h // lwio(get)
o.h = 'wanse' // wanse(set)
o.h // wanse(get)
现在我们回到代码里面，
首先我们看到
var dep = new Dep()
这个是一个发布订阅者模式的一个容器，你当它是和一个obj的一个key相互对应，其保存了监听了data里面某个属性的所有view对象，然后在这个data里面的属性触发set的时候，dep里面的监听者会收到更新
set: function (newVal) {
if (newVal === val) return
val = newVal;
// 作为发布者发出通知
dep.notify();
}
function Dep () {
this.subs = []
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
notify: function() {
this.subs.forEach(function(sub) {
sub.update();
});
}
};
在get中我们可以看到有一个单独看比较有疑惑的语句
if (Dep.target) dep.addSub(Dep.target);
Dep的target在watcher构造时候会被赋值给当这个new出来的Watcher,然后后面会触发data对应属性的get把这个watcher加入Dep里面成为订阅者。
现在我们可以回到Watcher里面了。
Watcher
好了现在我们可以回到watcher了。一个Watcher对应的是一个view对象与某个data属性，一个data属性可以有多个watcher
function Watcher (vm, node, name, nodeType) {
Dep.target = this;
this.name = name;
this.node = node;
this.vm = vm;
this.nodeType = nodeType;
this.update();
Dep.target = null;
}
Watcher.prototype = {
update: function () {
this.get();
if (this.nodeType == 'text') {
this.node.nodeValue = this.value;
}
if (this.nodeType == 'input') {
this.node.value = this.value;
}
},
// 获取data中的属性值
get: function () {
this.value = this.vm[this.name]; // 触发相应属性的get
}
}
function Dep () {
this.subs = []
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
notify: function() {
this.subs.forEach(function(sub) {
sub.update();
});
}
};
代码有点长，我们现在只关注data变化之后怎么将变化与view绑定
先解释一下参数，Watcher里面有4个参数，第一个vm是vue实例这个我们先不管
第二个是node，也就是节点对象，第三个name是绑定data里面的属性，比如v-model="keke"，这个name就是keke。
Dep.target = this;
...
this.update();
Dep.target = null;
构造函数里面这一块就是我之前说的，
Dep的target在watcher构造时候会被赋值给当这个new出来的Watcher,然后后面会触发data对应属性的get把这个watcher加入Dep里面成为订阅者。
现在进update看一下
update: function () {
this.get();
if (this.nodeType == 'text') {
this.node.nodeValue = this.value;
}
if (this.nodeType == 'input') {
this.node.value = this.value;
}
},
// 获取data中的属性值
get: function () {
this.value = this.vm[this.name]; // 触发相应属性的get
}
update即实现了触发data某个属性的get从而把当前Watcher加入到dep中，又实现了把data里面某个属性的值赋值给view中的节点。
data到view总结
所以data到view的绑定流程就变成了，data某个属性变化(触发set) -> set中通知了监听这个属性的所有Watcher(dep.notify()) -> Dep调用了所有Watcher的update，把data的值赋给了view中的节点
这就是基于vue的data到view部分的绑定。
view到data
示例代码中，通过v-model绑定的input，在输入内容之后会使得data里面的text的值也进行了对应的修改，现在我们来看一下这一部分是怎么做的。
这一块的核心只有compile这一个函数。
compile的调用是在初始化绑定完之后调用nodeToFragment时遍历所有Node发生的。
function nodeToFragment (node, vm) {
var flag = document.createDocumentFragment();
var child;
while (child = node.firstChild) {
compile(child, vm);
flag.appendChild(child); // 将子节点劫持到文档片段中
}
return flag;
}
现在我们进compile里面看看
function compile (node, vm) {
var reg = /\{\{(.*)\}\}/;
// 节点类型为元素
if (node.nodeType === 1) {
var attr = node.attributes;
// 解析属性
for (var i = 0; i < attr.length; i++) {
if (attr[i].nodeName == 'v-model') {
var name = attr[i].nodeValue; // 获取v-model绑定的属性名
node.addEventListener('input', function (e) {
// 给相应的data属性赋值，进而触发该属性的set方法
vm[name] = e.target.value;
});
node.value = vm[name]; // 将data的值赋给该node
node.removeAttribute('v-model');
}
};
new Watcher(vm, node, name, 'input');
}
// 节点类型为text
if (node.nodeType === 3) {
if (reg.test(node.nodeValue)) {
var name = RegExp.$1; // 获取匹配到的字符串
name = name.trim();
new Watcher(vm, node, name, 'text');
}
}
}
其实核心的就几行
for (var i = 0; i < attr.length; i++) {
if (attr[i].nodeName == 'v-model') {
var name = attr[i].nodeValue; // 获取v-model绑定的属性名
node.addEventListener('input', function (e) {
// 给相应的data属性赋值，进而触发该属性的set方法
vm[name] = e.target.value;
});
node.value = vm[name]; // 将data的值赋给该node
node.removeAttribute('v-model');
}
};
这里的实例代码比较简单，就只有input的，vue实际上会比较复杂。
基本就是监听这个input是否产生了变化，产生了变化就改变data的值
node.addEventListener('input', function (e) {
// 给相应的data属性赋值，进而触发该属性的set方法
vm[name] = e.target.value;
});
view到data的总结
所以data到view的绑定流程就变成了，给view的节点添加事件比如input -> input事件触发的时候吧vue对象里面的data赋值给e.target.value之类的值，以此来实现view的变化同步到data上。
这就是基于vue的data到view部分的绑定。
后序(未完成)
加入vue源码(未完成)
网友评论