Vue資料雙向繫結
前言
什麼是資料雙向繫結？
vue是一個mvvm框架，即資料雙向繫結，即當資料發生變化的時候，檢視也就發生變化，當檢視發生變化的時候，資料也會跟著同步變化。這也算是vue的精髓之處了。值得注意的是，我們所說的資料雙向繫結，一定是對於UI控制元件來說的，非UI控制元件不會涉及到資料雙向繫結。 單向資料繫結是使用狀態管理工具（如redux）的前提。如果我們使用vuex，那麼資料流也是單項的，這時就會和雙向資料繫結有衝突，我們可以這麼解決。
為什麼要實現資料的雙向繫結？
在vue中，如果使用vuex，實際上資料還是單向的，之所以說是資料雙向繫結，這是用的UI控制元件來說，對於我們處理表單，vue的雙向資料繫結用起來就特別舒服了。
即兩者並不互斥， 在全域性性資料流使用單項，方便跟蹤； 區域性性資料流使用雙向，簡單易操作。
一、訪問器屬性
Object.defineProperty()函式可以定義物件的屬性相關描述符， 其中的set和get函式對於完成資料雙向繫結起到了至關重要的作用，下面，我們看看這個函式的基本使用方式。
var obj = {
foo: 'foo'
}
Object.defineProperty(obj, 'foo', {
get: function () {
console.log('將要讀取obj.foo屬性');
},
set: function (newVal) {
console.log('當前值為', newVal);
}
});
obj.foo; // 將要讀取obj.foo屬性
obj.foo = 'name'; // 當前值為 name可以看到，get即為我們訪問屬性時呼叫，set為我們設定屬性值時呼叫。
二、簡單的資料雙向繫結實現方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>forvue</title>
</head>
<body>
<input type="text" id="textInput">
輸入：<span id="textSpan"></span>
<script>
var obj = {},
textInput = document.querySelector('#textInput'),
textSpan = document.querySelector('#textSpan');
Object.defineProperty(obj, 'foo', {
set: function (newValue) {
textInput.value = newValue;
textSpan.innerHTML = newValue;
}
});
textInput.addEventListener('keyup', function (e) {
obj.foo = e.target.value;
});
</script>
</body>
</html>最終效果圖：
可以看到，實現一個簡單的資料雙向繫結還是不難的： 使用Object.defineProperty()來定義屬性的set函式，屬性被賦值的時候，修改Input的value值以及span中的innerHTML；然後監聽input的keyup事件，修改物件的屬性值，即可實現這樣的一個簡單的資料雙向繫結。
三、 實現任務的思路
上面我們只是實現了一個最簡單的資料雙向繫結，而我們真正希望實現的時下面這種方式：
<div id="app">
<input type="text" v-model="text">
{{ text }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
text: 'hello world'
}
});
</script>
即和vue一樣的方式來實現資料的雙向繫結。那麼，我們可以把整個實現過程分為下面幾步：
- 輸入框以及文字節點與 data 中的資料繫結
- 輸入框內容變化時，data 中的資料同步變化。即 view => model 的變化。
- data 中的資料變化時，文字節點的內容同步變化。即 model => view 的變化。
四、DocumentFragment
如果希望實現任務一，我們還需要使用到 DocumentFragment 文件片段，可以把它看做一個容器，如下所示：
<div id="app">
</div>
<script>
var flag = document.createDocumentFragment(),
span = document.createElement('span'),
textNode = document.createTextNode('hello world');
span.appendChild(textNode);
flag.appendChild(span);
document.querySelector('#app').appendChild(flag)
</script>
這樣，我們就可以得到下面的DOM樹：
使用文件片段的好處在於：在文件片段上進行操作DOM，而不會影響到真實的DOM，操作完成之後，我們就可以新增到真實DOM上，這樣的效率比直接在正式DOM上修改要高很多 。
vue進行編譯時，就是將掛載目標的所有子節點劫持到DocumentFragment中，經過一番處理之後，再將DocumentFragment整體返回插入掛載目標。
如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>forvue</title>
</head>
<body>
<div id="app">
<input type="text" id="a">
<span id="b"></span>
</div>
<script>
var dom = nodeToFragment(document.getElementById('app'));
console.log(dom);
function nodeToFragment(node) {
var flag = document.createDocumentFragment();
var child;
while (child = node.firstChild) {
flag.appendChild(child);
}
return flag;
}
document.getElementById('app').appendChild(dom);
</script>
</body>
</html>
即首先獲取到div，然後通過documentFragment劫持，接著再把這個文件片段新增到div上去。
五、初始化資料繫結
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>forvue</title>
</head>
<body>
<div id="app">
<input type="text" v-model="text">
{{ text }}
</div>
<script>
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.value = vm.data[name]; // 將data的值賦值給該node
node.removeAttribute('v-model');
}
}
}
// 節點型別為text
if (node.nodeType === 3) {
if (reg.test(node.nodeValue)) {
var name = RegExp.$1; // 獲取匹配到的字串
name = name.trim();
node.nodeValue = vm.data[name]; // 將data的值賦值給該node
}
}
}
function nodeToFragment(node, vm) {
var flag = document.createDocumentFragment();
var child;
while (child = node.firstChild) {
compile(child, vm);
flag.appendChild(child); // 將子節點劫持到文件片段中
}
return flag;
}
function Vue(options) {
this.data = options.data;
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>
以上的程式碼實現而立任務一，我們可以看到，hello world 已經呈現在了輸入框和文字節點中了。
六、響應式的資料繫結
我們再來看看任務二的實現思路： 當我們在輸入框輸入資料的時候，首先觸發的時input事件（或者keyup、change事件），在相應的事件處理程式中，我們獲取輸入框的value並賦值給vm例項的text屬性。 我們會利用defineProperty將data中的text設定為vm的訪問器屬性，因此給vm.text賦值，就會觸發set方法。 在set方法中主要做兩件事情，第一是更新屬性的值，第二留在任務三種說。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>forvue</title>
</head>
<body>
<div id="app">
<input type="text" v-model="text">
{{ text }}
</div>
<script>
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');
}
}
}
// 節點型別為text
if (node.nodeType === 3) {
if (reg.test(node.nodeValue)) {
var name = RegExp.$1; // 獲取匹配到的字串
name = name.trim();
node.nodeValue = vm[name]; // 將data的值賦值給該node
}
}
}
function nodeToFragment(node, vm) {
var flag = document.createDocumentFragment();
var child;
while (child = node.firstChild) {
compile(child, vm);
flag.appendChild(child); // 將子節點劫持到文件片段中
}
return flag;
}
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'
}
});
function defineReactive(obj, key, val) {
// 響應式的資料繫結
Object.defineProperty(obj, key, {
get: function () {
return val;
},
set: function (newVal) {
if (newVal === val) {
return;
} else {
val = newVal;
console.log(val); // 方便看效果
}
}
});
}
function observe (obj, vm) {
Object.keys(obj).forEach(function (key) {
defineReactive(vm, key, obj[key]);
});
}
</script>
</body>
</html>
以上，任務二也就完成了，text屬性值會和輸入框的內容同步變化。
七、 訂閱/釋出模式（subscribe & publish）
text屬性變化了，set方法觸發了，但是文字節點的內容沒有變化。 如何才能讓同樣繫結到text的文字節點也同步變化呢？ 這裡又有一個知識點： 訂閱釋出模式。
訂閱釋出模式又稱為觀察者模式，定義了一種一對多的關係，讓多個觀察者同時監聽某一個主題物件，這個主題物件的狀態發生改變時就會通知所有的觀察者物件。
釋出者發出通知 =>主題物件收到通知並推送給訂閱者 => 訂閱者執行相應的操作。
// 一個釋出者 publisher，功能就是負責釋出訊息 - publish
var pub = {
publish: function () {
dep.notify();
}
}
// 多個訂閱者 subscribers， 在釋出者釋出訊息之後執行函式
var sub1 = {
update: function () {
console.log(1);
}
}
var sub2 = {
update: function () {
console.log(2);
}
}
var sub3 = {
update: function () {
console.log(3);
}
}
// 一個主題物件
function Dep() {
this.subs = [sub1, sub2, sub3];
}
Dep.prototype.notify = function () {
this.subs.forEach(function (sub) {
sub.update();
});
}
// 釋出者釋出訊息， 主題物件執行notify方法，進而觸發訂閱者執行Update方法
var dep = new Dep();
pub.publish();
不難看出，這裡的思路還是很簡單的： 釋出者負責釋出訊息、 訂閱者負責接收接收訊息，而最重要的是主題物件，他需要記錄所有的訂閱這特訊息的人，然後負責吧釋出的訊息通知給哪些訂閱了訊息的人。
所以，當set方法觸發後做的第二件事情就是作為釋出者發出通知： “我是屬性text，我變了”。 文字節點作為訂閱者，在接收到訊息之後執行相應的更新動作。
八、 雙向繫結的實現
回顧一下，每當new一個Vue，主要做了兩件事情：第一是監聽資料：observe(data)，第二是編譯HTML：nodeToFragment(id)
在監聽資料的過程中，會為data中的每一個屬性生成一個主題物件dep。
在編譯HTML的過程中，會為每一個與資料繫結相關的節點生成一個訂閱者 watcher，watcher會將自己新增到相應屬性的dep中。
我們已經實現了： 修改輸入框內容 => 在事件回撥函式中修改屬性值 => 觸發屬性的set方法。
接下來我們要實現的是： 發出通知 dep.notify() => 觸發訂閱者update方法 => 更新檢視。
這裡的關鍵邏輯是： 如何將watcher新增到關聯屬性的dep中。
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');
}
}
}
// 節點型別為text
if (node.nodeType === 3) {
if (reg.test(node.nodeValue)) {
var name = RegExp.$1; // 獲取匹配到的字串
name = name.trim();
// node.nodeValue = vm[name]; // 將data的值賦值給該node
new Watcher(vm, node, name);
}
}
}
在編譯HTML的過程中，為每個和data關聯的節點生成一個Watcher。那麼Watcher函式中發生了什麼呢？
function Watcher(vm, node, name) {
Dep.target = this;
this.name = name;
this.node = node;
this.vm = vm;
this.update();
Dep.target = null;
}
Watcher.prototype = {
update: function () {
this.get();
this.node.nodeValue = this.value;
},
// 獲取data中的屬性值
get: function () {
this.value = this.vm[this.name]; // 觸發相應屬性的get
}
}
首先，將自己賦值給了一個全域性變數 Dep.target;
其次，執行了update方法，進而執行了 get 方法，get方法讀取了vm的訪問器屬性， 從而觸發了訪問器屬性的get方法，get方法將該watcher新增到對應訪問器屬性的dep中；
再次，獲取順序性的值， 然後更新檢視。
最後將Dep.target設定為空。 因為他是全域性變數，也是watcher和dep關聯的唯一橋樑，任何時候，都必須保證Dep.target只有一個值。
最終如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>forvue</title>
</head>
<body>
<div id="app">
<input type="text" v-model="text"> <br>
{{ text }} <br>
{{ 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;
} else {
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');
}
}
}
// 節點型別為text
if (node.nodeType === 3) {
if (reg.test(node.nodeValue)) {
var name = RegExp.$1; // 獲取匹配到的字串
name = name.trim();
// node.nodeValue = vm[name]; // 將data的值賦值給該node
new Watcher(vm, node, name);
}
}
}
function Watcher(vm, node, name) {
Dep.target = this;
this.name = name;
this.node = node;
this.vm = vm;
this.update();
Dep.target = null;
}
Watcher.prototype = {
update: function () {
this.get();
this.node.nodeValue = 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>
搜尋
複製