vue中的雙向數(shù)據(jù)綁定原理與常見操作技巧詳解
本文實例講述了vue中的雙向數(shù)據(jù)綁定原理與常見操作技巧。分享給大家供大家參考，具體如下：
什么是雙向數(shù)據(jù)綁定？
vue是一個mvvm框架，即數(shù)據(jù)雙向綁定，即當(dāng)數(shù)據(jù)發(fā)生變化的時候，視圖也就發(fā)生變化，當(dāng)視圖發(fā)生變化的時候，數(shù)據(jù)也會跟著同步變化。這也是算是vue的精髓之處了。值得注意的是，我們所說的數(shù)據(jù)雙向綁定，一定是對于UI控件來說的，非UI控件不會涉及到數(shù)據(jù)雙向綁定。單向數(shù)據(jù)綁定是使用狀態(tài)管理工具的前提，如果我們使用vuex，那么數(shù)據(jù)流也是單向的，這時就會和雙向數(shù)據(jù)綁定有沖突，我們可以這么解決。
為什么要實現(xiàn)數(shù)據(jù)的雙向綁定？
在vue中，如果使用vuex，實際上數(shù)據(jù)還是單向的，之所以說是數(shù)據(jù)雙向綁定，這是用的UI控件來說，對于我們處理表單，vue的雙向數(shù)據(jù)綁定用起來就特別舒服了。即兩者并不互斥，在全局性數(shù)據(jù)流使用單項，方便跟蹤，局部性數(shù)據(jù)流使用雙向，簡單易操作。
1.訪問器屬性
Object.defineProperty()函數(shù)可以定義對象的屬性相關(guān)描述符，其中的set和get函數(shù)對于完成數(shù)據(jù)雙向綁定起到了至關(guān)重要的作用，下面，我們看看這個函數(shù)的基本使用方式。
var obj = { foo: ’foo’ } Object.defineProperty(obj, ’foo’, { get: function () { console.log(’將要讀取obj.foo屬性’); }, set: function (newVal) { console.log(’當(dāng)前值為’, newVal); } }); obj.foo; // 將要讀取obj.foo屬性 obj.foo = ’name’; // 當(dāng)前值為 name
上面代碼中，get即為我們訪問屬性時調(diào)用，set為我們設(shè)置屬性值時調(diào)用。
2.簡單的數(shù)據(jù)雙向綁定實現(xiàn)方法
<!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>
可以看到，實現(xiàn)一個簡單的數(shù)據(jù)雙向綁定還是不難的，使用Object.defineProperty()來定義屬性的set函數(shù)，屬性被賦值的時候，修改input的value值以及span中的innerHTML，然后監(jiān)聽input的keyup事件，修改對象的屬性值，即可以實現(xiàn)這樣一個簡單的數(shù)據(jù)雙向綁定。
3. 實現(xiàn)任務(wù)的思路
上面我們只是實現(xiàn)了一個簡單的數(shù)據(jù)雙向綁定，而我們真正希望實現(xiàn)的是下面這種方式：
<div id='app'> <input type='text' v-model='text'> {{ text }} </div> <script> var vm = new Vue({ el: ’#app’, data: {text: ’hello world’ } }); </script>
即和vue一樣的方式來實現(xiàn)數(shù)據(jù)的雙向綁定，那么我們可以把整個實現(xiàn)過程分為下面幾步：
輸入框以及文本節(jié)點與data中的數(shù)據(jù)綁定
輸入框內(nèi)容變化時，data中的數(shù)據(jù)同步變化。即view => model的變化。
data中的數(shù)據(jù)變化 時，文本節(jié)點的內(nèi)容同步變化。即model => view的變化。
4.DocumentFragment
如果希望實現(xiàn)任務(wù)，我們還需要使用到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上修改要高很多。
vue在進行編譯時，就是將掛載目標(biāo)的所有子節(jié)點劫持到DocumentFragment中，經(jīng)過一番處理之后，再將DocumentFragment整體返回插入掛載目標(biāo)。
5.初始化數(shù)據(jù)綁定
function compile(node, vm) { var reg = /{{(.*)}}/ // 如果節(jié)點是元素 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 node.value = vm.data[name] node.removeAttribute(’v-model’) } } } if (node.nodeType === 3) { if (reg.test(node.nodeValue)) { var name = RegExp.$1 name = name.trim() node.nodeValue = vm.data[name] } }}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 el = options.el var dom = nodeToFragment(document.querySelector(el), this) document.querySelector(el).appendChild(dom)}var vm = new Vue({ el: ’#app’, data: { text: ’hello’ }})
6.響應(yīng)式的數(shù)據(jù)綁定
我們再來看看任務(wù)的實現(xiàn)思路，當(dāng)我們在輸入框輸入數(shù)據(jù)的時候，首先觸發(fā)input事件（或者keyup,change事件），在相應(yīng)的事件處理程序中，我們獲取輸入框的value并賦值給vm實例的text屬性。我們會利用defineProperty將data中text設(shè)置為vm的訪問器屬性，因此給vm.text賦值，就會觸發(fā)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 = /{{(.*)}}/; // 節(jié)點類型為元素 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) { // 給相應(yīng)的data屬性賦值，進而觸發(fā)屬性的set方法 vm[name] = e.target.value; }) node.value = vm[name]; // 將data的值賦值給該node node.removeAttribute(’v-model’); }} } // 節(jié)點類型為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); // 將子節(jié)點劫持到文檔片段中 } 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) { // 響應(yīng)式的數(shù)據(jù)綁定 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>
7. 訂閱/發(fā)布模式(subscribe & publish)
text屬性變化了，set方法觸發(fā)了，但是文本節(jié)點的內(nèi)容沒有變化。如何才能讓同樣綁定到text的文本節(jié)點也同步變化呢？這里有一個知識點：訂閱發(fā)布模式，訂閱發(fā)布模式又稱為觀察者模式，定義一種一對多的關(guān)系，讓多個觀察者同時監(jiān)聽某一個主題對象，這個主題對象的狀態(tài)發(fā)生改變時就會通知所有的觀察者對象。發(fā)布者發(fā)出通知 => 主題對象收到通知并推送給訂閱者 => 訂閱者執(zhí)行相應(yīng)的操作
// 一個發(fā)布者 publisher，功能就是負(fù)責(zé)發(fā)布消息 - publish var pub = { publish: function () {dep.notify(); } } // 多個訂閱者 subscribers， 在發(fā)布者發(fā)布消息之后執(zhí)行函數(shù) 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(); }); } // 發(fā)布者發(fā)布消息， 主題對象執(zhí)行notify方法，進而觸發(fā)訂閱者執(zhí)行Update方法 var dep = new Dep(); pub.publish();
不難看出，這里的思路還是很簡單的： 發(fā)布者負(fù)責(zé)發(fā)布消息、 訂閱者負(fù)責(zé)接收接收消息，而最重要的是主題對象，他需要記錄所有的訂閱這特消息的人，然后負(fù)責(zé)吧發(fā)布的消息通知給哪些訂閱了消息的人。
所以，當(dāng)set方法觸發(fā)后做的第二件事情就是作為發(fā)布者發(fā)出通知： “我是屬性text，我變了”。 文本節(jié)點作為訂閱者，在接收到消息之后執(zhí)行相應(yīng)的更新動作。
8.雙向綁定的實現(xiàn)
回顧一下，每當(dāng)new一個vue,主要做了兩件事情 ，第一監(jiān)聽數(shù)據(jù):observe(data),第二是編譯HTML， nodeToFragment(id)在監(jiān)聽數(shù)據(jù)的過程中，會為data中的每一個屬性生成一個主題對象dep。在編譯HTML的過程中，會為每一個數(shù)據(jù)綁定相關(guān)的節(jié)點生成一個訂閱者watcher,watcher會將自己添加到相應(yīng)屬性的dep中。我們已經(jīng)實現(xiàn)了：修改輸入框內(nèi)容 => 在事件回調(diào)函數(shù)中修改屬性值 => 觸 發(fā)屬性的set方法。接下來我們要實現(xiàn)的是：發(fā)出通知dep.notify() => 觸發(fā)訂閱者update方法 => 更新視圖。這里的關(guān)鍵邏輯是：如何將watch添加到關(guān)聯(lián)屬性的dep中。
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() { if (Dep.target) { // 添加訂閱者watcher到主題對象Dep dep.addsub(Dep.target) } return val }, set: function(newVal) { if (newVal === val) { return } else { val = newVal // 作為發(fā)布者發(fā)出通知 dep.notify() } } })}function Dep () { this.subs = []}Dep.prototype = { addsub: function(sub) { this.subs.push(sub) }, notify: function() { this.subs.forEach(function(sub) { sub.update() }) }}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 node.addEventListener(’input’, function(e) { vm[name] = e.target.value }) node.value = vm[name] node.removeAttribute(’v-model’) } } } if (node.nodeType === 3) { if (reg.test(node.nodeValue)) { var name = RegExp.$1 name = name.trim() // node.nodeValue = vm[name] new Watcher(vm, node, name) } }}function nodeToFragment(node, vm) { var flag = document.createDocumentFragment() var child while (child = node.firstChild) { compile(child, vm) flag.appendChild(child) } return flag}function Watcher(vm, node, name){ Dep.target = this this.vm = vm this.node = node this.name = name this.update() Dep.target = null}Watcher.prototype = { update: function() { this.get() this.node.nodeValue = this.value }, get: function() { this.value = this.vm[this.name] }}function Vue(options) { this.data = options.data this.methods = options.methods var data = this.data var el = options.el observe(data, this) var dom = nodeToFragment(document.querySelector(el), this) document.querySelector(el).appendChild(dom)}var vm = new Vue({ el: ’#app’, data: { text: 123 }})
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章：
網(wǎng)公網(wǎng)安備