vue中的雙向數(shù)據(jù)綁定原理與常見操作技巧詳解
本文實(shí)例講述了vue中的雙向數(shù)據(jù)綁定原理與常見操作技巧。分享給大家供大家參考，具體如下：
什么是雙向數(shù)據(jù)綁定？
vue是一個(gè)mvvm框架，即數(shù)據(jù)雙向綁定，即當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，視圖也就發(fā)生變化，當(dāng)視圖發(fā)生變化的時(shí)候，數(shù)據(jù)也會(huì)跟著同步變化。這也是算是vue的精髓之處了。值得注意的是，我們所說(shuō)的數(shù)據(jù)雙向綁定，一定是對(duì)于UI控件來(lái)說(shuō)的，非UI控件不會(huì)涉及到數(shù)據(jù)雙向綁定。單向數(shù)據(jù)綁定是使用狀態(tài)管理工具的前提，如果我們使用vuex，那么數(shù)據(jù)流也是單向的，這時(shí)就會(huì)和雙向數(shù)據(jù)綁定有沖突，我們可以這么解決。
為什么要實(shí)現(xiàn)數(shù)據(jù)的雙向綁定？
在vue中，如果使用vuex，實(shí)際上數(shù)據(jù)還是單向的，之所以說(shuō)是數(shù)據(jù)雙向綁定，這是用的UI控件來(lái)說(shuō)，對(duì)于我們處理表單，vue的雙向數(shù)據(jù)綁定用起來(lái)就特別舒服了。即兩者并不互斥，在全局性數(shù)據(jù)流使用單項(xiàng)，方便跟蹤，局部性數(shù)據(jù)流使用雙向，簡(jiǎn)單易操作。
1.訪問(wèn)器屬性
Object.defineProperty()函數(shù)可以定義對(duì)象的屬性相關(guān)描述符，其中的set和get函數(shù)對(duì)于完成數(shù)據(jù)雙向綁定起到了至關(guān)重要的作用，下面，我們看看這個(gè)函數(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即為我們?cè)L問(wèn)屬性時(shí)調(diào)用，set為我們?cè)O(shè)置屬性值時(shí)調(diào)用。
2.簡(jiǎn)單的數(shù)據(jù)雙向綁定實(shí)現(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>
可以看到，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的數(shù)據(jù)雙向綁定還是不難的，使用Object.defineProperty()來(lái)定義屬性的set函數(shù)，屬性被賦值的時(shí)候，修改input的value值以及span中的innerHTML，然后監(jiān)聽input的keyup事件，修改對(duì)象的屬性值，即可以實(shí)現(xiàn)這樣一個(gè)簡(jiǎn)單的數(shù)據(jù)雙向綁定。
3. 實(shí)現(xiàn)任務(wù)的思路
上面我們只是實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的數(shù)據(jù)雙向綁定，而我們真正希望實(shí)現(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一樣的方式來(lái)實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，那么我們可以把整個(gè)實(shí)現(xiàn)過(guò)程分為下面幾步：
輸入框以及文本節(jié)點(diǎn)與data中的數(shù)據(jù)綁定
輸入框內(nèi)容變化時(shí)，data中的數(shù)據(jù)同步變化。即view => model的變化。
data中的數(shù)據(jù)變化 時(shí)，文本節(jié)點(diǎn)的內(nèi)容同步變化。即model => view的變化。
4.DocumentFragment
如果希望實(shí)現(xiàn)任務(wù)，我們還需要使用到DocumentFragment文檔片段，可以把它看做一個(gè)容器，如下所示：
<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>
使用文檔片段的好處在于：在文檔片段上進(jìn)行操作DOM，而不會(huì)影響到真實(shí)的DOM，操作完成后，我們就可以添加到真實(shí)的DOM上，這樣的效率比直接在正式DOM上修改要高很多。
vue在進(jìn)行編譯時(shí)，就是將掛載目標(biāo)的所有子節(jié)點(diǎn)劫持到DocumentFragment中，經(jīng)過(guò)一番處理之后，再將DocumentFragment整體返回插入掛載目標(biāo)。
5.初始化數(shù)據(jù)綁定
function compile(node, vm) {
var reg = /\{\{(.*)\}\}/
// 如果節(jié)點(diǎn)是元素
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ù)綁定
我們?cè)賮?lái)看看任務(wù)的實(shí)現(xiàn)思路，當(dāng)我們?cè)谳斎肟蜉斎霐?shù)據(jù)的時(shí)候，首先觸發(fā)input事件（或者keyup,change事件），在相應(yīng)的事件處理程序中，我們獲取輸入框的value并賦值給vm實(shí)例的text屬性。我們會(huì)利用defineProperty將data中text設(shè)置為vm的訪問(wèn)器屬性，因此給vm.text賦值，就會(huì)觸發(fā)set方法。在set方法可主要做兩件事，第一，更新屬性的值，第二后面再說(shuō)。
<!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é)點(diǎn)類型為元素
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屬性賦值，進(jìn)而觸發(fā)屬性的set方法
vm[name] = e.target.value;
})
node.value = vm[name]; // 將data的值賦值給該node
node.removeAttribute('v-model');
}
}
}
// 節(jié)點(diǎn)類型為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é)點(diǎn)劫持到文檔片段中
}
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é)點(diǎn)的內(nèi)容沒(méi)有變化。如何才能讓同樣綁定到text的文本節(jié)點(diǎn)也同步變化呢？這里有一個(gè)知識(shí)點(diǎn)：訂閱發(fā)布模式，訂閱發(fā)布模式又稱為觀察者模式，定義一種一對(duì)多的關(guān)系，讓多個(gè)觀察者同時(shí)監(jiān)聽某一個(gè)主題對(duì)象，這個(gè)主題對(duì)象的狀態(tài)發(fā)生改變時(shí)就會(huì)通知所有的觀察者對(duì)象。
發(fā)布者發(fā)出通知 => 主題對(duì)象收到通知并推送給訂閱者 => 訂閱者執(zhí)行相應(yīng)的操作
// 一個(gè)發(fā)布者 publisher，功能就是負(fù)責(zé)發(fā)布消息 - publish
var pub = {
publish: function () {
dep.notify();
}
}
// 多個(gè)訂閱者 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);
}
}
// 一個(gè)主題對(duì)象
function Dep() {
this.subs = [sub1, sub2, sub3];
}
Dep.prototype.notify = function () {
this.subs.forEach(function (sub) {
sub.update();
});
}
// 發(fā)布者發(fā)布消息， 主題對(duì)象執(zhí)行notify方法，進(jìn)而觸發(fā)訂閱者執(zhí)行Update方法
var dep = new Dep();
pub.publish();
不難看出，這里的思路還是很簡(jiǎn)單的： 發(fā)布者負(fù)責(zé)發(fā)布消息、 訂閱者負(fù)責(zé)接收接收消息，而最重要的是主題對(duì)象，他需要記錄所有的訂閱這特消息的人，然后負(fù)責(zé)吧發(fā)布的消息通知給哪些訂閱了消息的人。
所以，當(dāng)set方法觸發(fā)后做的第二件事情就是作為發(fā)布者發(fā)出通知： “我是屬性text，我變了”。 文本節(jié)點(diǎn)作為訂閱者，在接收到消息之后執(zhí)行相應(yīng)的更新動(dòng)作。
8.雙向綁定的實(shí)現(xiàn)
回顧一下，每當(dāng)new一個(gè)vue,主要做了兩件事情 ，第一監(jiān)聽數(shù)據(jù):observe(data),第二是編譯HTML， nodeToFragment(id)
在監(jiān)聽數(shù)據(jù)的過(guò)程中，會(huì)為data中的每一個(gè)屬性生成一個(gè)主題對(duì)象dep。
在編譯HTML的過(guò)程中，會(huì)為每一個(gè)數(shù)據(jù)綁定相關(guān)的節(jié)點(diǎn)生成一個(gè)訂閱者watcher,watcher會(huì)將自己添加到相應(yīng)屬性的dep中。
我們已經(jīng)實(shí)現(xiàn)了：修改輸入框內(nèi)容 => 在事件回調(diào)函數(shù)中修改屬性值 => 觸 發(fā)屬性的set方法。
接下來(lái)我們要實(shí)現(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到主題對(duì)象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
}
})
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vue在data中定義變量后依舊報(bào)undefined的解決
這篇文章主要介紹了vue在data中定義變量后依舊報(bào)undefined的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
今天我們稍微說(shuō)一下 vue3 項(xiàng)目中的 hooks 的使用，其實(shí)這個(gè) hooks 呢是和 vue2 當(dāng)中的 mixin 是類似的，學(xué)習(xí)過(guò) vue2 的小伙伴一定對(duì) mixin 一定比較熟悉，快跟隨小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧2022-08-08
生命周期鉤子又被叫做生命周期時(shí)間,生命周期函數(shù),生命周期鉤子就是vue生命周期中出發(fā)的各類事件,這些事件被稱為生命周期鉤子,下面這篇文章主要給大家介紹了關(guān)于Vue生命周期鉤子的相關(guān)資料,需要的朋友可以參考下2022-06-06
Vue-cli3生成的Vue項(xiàng)目加載Mxgraph方法示例
這篇文章主要介紹了Vue-cli3生成的Vue項(xiàng)目加載Mxgraph方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
vue使用axios獲取不到響應(yīng)頭Content-Disposition的問(wèn)題及解決
這篇文章主要介紹了vue使用axios獲取不到響應(yīng)頭Content-Disposition的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了vue?@tap事件之$event用法介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue前端實(shí)現(xiàn)導(dǎo)出頁(yè)面為pdf(分頁(yè)導(dǎo)出、不分頁(yè)導(dǎo)出及分模塊導(dǎo)出)
在實(shí)際應(yīng)用中可能用戶希望將系統(tǒng)中一個(gè)頁(yè)面展示的所有數(shù)據(jù)報(bào)表,用PDF的文件格式下載下來(lái),以便于其他用途,這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)導(dǎo)出頁(yè)面為pdf(分頁(yè)導(dǎo)出、不分頁(yè)導(dǎo)出及分模塊導(dǎo)出)的相關(guān)資料,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了vue腳手架項(xiàng)目創(chuàng)建步驟詳解，文章講解的很清晰，初學(xué)者可以跟著步驟學(xué)習(xí)下2021-03-03
這篇文章主要介紹了VUE注冊(cè)全局組件和局部組件過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
vue踩坑記錄:屬性報(bào)undefined錯(cuò)誤問(wèn)題
這篇文章主要介紹了vue踩坑記錄:屬性報(bào)undefined錯(cuò)誤問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04