vue中的雙向資料繫結原理與常見操作技巧詳解
本文例項講述了vue中的雙向資料繫結原理與常見操作技巧。分享給大家供大家參考,具體如下:
什麼是雙向資料繫結?
vue是一個mvvm框架,即資料雙向繫結,即當資料發生變化的時候,檢視也就發生變化,當檢視發生變化的時候,資料也會跟著同步變化。這也是算是vue的精髓之處了。值得注意的是,我們所說的資料雙向繫結,一定是對於UI控制元件來說的,非UI控制元件不會涉及到資料雙向繫結。單向資料繫結是使用狀態管理工具的前提,如果我們使用vuex,那麼資料流也是單向的,這時就會和雙向資料繫結有衝突,我們可以這麼解決。
為什麼要實現資料的雙向繫結?
在vue中,如果使用vuex,實際上資料還是單向的,之所以說是資料雙向繫結,這是用的UI控制元件來說,對於我們處理表單,vue的雙向資料繫結用起來就特別舒服了。即兩者並不互斥,在全域性性資料流使用單項,方便跟蹤,區域性性資料流使用雙向,簡單易操作。
1.訪問器屬性
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為我們設定屬性值時呼叫。
2.簡單的資料雙向繫結實現方法
<!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,{ 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事件,修改物件的屬性值,即可以實現這樣一個簡單的資料雙向繫結。
3. 實現任務的思路
上面我們只是實現了一個簡單的資料雙向繫結,而我們真正希望實現的是下面這種方式:
<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的變化。
4.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上修改要高很多。
vue在進行編譯時,就是將掛載目標的所有子節點劫持到DocumentFragment中,經過一番處理之後,再將DocumentFragment整體返回插入掛載目標。
5.初始化資料繫結
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.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.響應式的資料繫結
我們再來看看任務的實現思路,當我們在輸入框輸入資料的時候,首先觸發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,{ 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,obj[key]); }); } </script> </body> </html>
7. 訂閱/釋出模式(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,我變了”。 文字節點作為訂閱者,在接收到訊息之後執行相應的更新動作。
8.雙向繫結的實現
回顧一下,每當new一個vue,主要做了兩件事情 ,第一監聽資料:observe(data),第二是編譯HTML, nodeToFragment(id)
在監聽資料的過程中,會為data中的每一個屬性生成一個主題物件dep。
在編譯HTML的過程中,會為每一個數據繫結相關的節點生成一個訂閱者watcher,watcher會將自己新增到相應屬性的dep中。
我們已經實現了:修改輸入框內容 => 在事件回撥函式中修改屬性值 => 觸 發屬性的set方法。
接下來我們要實現的是:發出通知dep.notify() => 觸發訂閱者update方法 => 更新檢視。
這裡的關鍵邏輯是:如何將watch新增到關聯屬性的dep中。
function observe(obj,vm) { Object.keys(obj).forEach(function(key) { defineReactive(vm,obj[key]) }) } function defineReactive(obj,val) { var dep = new Dep() Object.defineProperty(obj,{ get: function() { if (Dep.target) { // 新增訂閱者watcher到主題物件Dep dep.addsub(Dep.target) } return val },set: function(newVal) { if (newVal === val) { return } else { 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() }) } } 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,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),data: { text: 123 } })
希望本文所述對大家vue.js程式設計有所幫助。