小編給大家分享一下vue.js雙向綁定是什么意思，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司主營(yíng)綠春網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都App制作,綠春h5微信小程序開(kāi)發(fā)搭建,綠春網(wǎng)站營(yíng)銷(xiāo)推廣歡迎綠春等地區(qū)企業(yè)咨詢(xún)

vue.js雙向綁定：訪問(wèn)器屬性是對(duì)象中的一種特殊屬性，它不能直接在對(duì)象中設(shè)置，而必須通過(guò) 【defineProperty()】方法單獨(dú)定義。

一、訪問(wèn)器屬性

訪問(wèn)器屬性是對(duì)象中的一種特殊屬性，它不能直接在對(duì)象中設(shè)置，而必須通過(guò) defineProperty() 方法單獨(dú)定義。

       var obj = { };
       // 為obj定義一個(gè)名為 hello 的訪問(wèn)器屬性
       Object.defineProperty(obj, "hello", {
         get: function () {return sth},
         set: function (val) {/* do sth */}
       })

obj.hello // 可以像普通屬性一樣讀取訪問(wèn)器屬性

訪問(wèn)器屬性的"值"比較特殊，讀取或設(shè)置訪問(wèn)器屬性的值，實(shí)際上是調(diào)用其內(nèi)部特性：get和set函數(shù)。

obj.hello // 讀取屬性，就是調(diào)用get函數(shù)并返回get函數(shù)的返回值

obj.hello = "abc" // 為屬性賦值，就是調(diào)用set函數(shù)，賦值其實(shí)是傳參

get 和 set 方法內(nèi)部的 this 都指向 obj，這意味著 get 和 set 函數(shù)可以操作對(duì)象內(nèi)部的值。另外，訪問(wèn)器屬性的會(huì)"覆蓋"同名的普通屬性，因?yàn)樵L問(wèn)器屬性會(huì)被優(yōu)先訪問(wèn)，與其同名的普通屬性則會(huì)被忽略。

二、極簡(jiǎn)雙向綁定的實(shí)現(xiàn)

此例實(shí)現(xiàn)的效果是：隨文本框輸入文字的變化，span 中會(huì)同步顯示相同的文字內(nèi)容；在js或控制臺(tái)顯式的修改 obj.hello 的值，視圖會(huì)相應(yīng)更新。這樣就實(shí)現(xiàn)了 model => view 以及 view => model 的雙向綁定。

以上就是 Vue 實(shí)現(xiàn)雙向綁定的基本原理。

三、分解任務(wù)

上述示例僅僅是為了說(shuō)明原理。我們最終要實(shí)現(xiàn)的是：

首先將該任務(wù)分成幾個(gè)子任務(wù)：

1、輸入框以及文本節(jié)點(diǎn)與 data 中的數(shù)據(jù)綁定

2、輸入框內(nèi)容變化時(shí)，data 中的數(shù)據(jù)同步變化。即 view => model 的變化。

3、data 中的數(shù)據(jù)變化時(shí)，文本節(jié)點(diǎn)的內(nèi)容同步變化。即 model => view 的變化。

要實(shí)現(xiàn)任務(wù)一，需要對(duì) DOM 進(jìn)行編譯，這里有一個(gè)知識(shí)點(diǎn)：DocumentFragment。

四、DocumentFragment

DocumentFragment（文檔片段）可以看作節(jié)點(diǎn)容器，它可以包含多個(gè)子節(jié)點(diǎn)，當(dāng)我們將它插入到 DOM 中時(shí)，只有它的子節(jié)點(diǎn)會(huì)插入目標(biāo)節(jié)點(diǎn)，所以把它看作一組節(jié)點(diǎn)的容器。使用 DocumentFragment 處理節(jié)點(diǎn)，速度和性能遠(yuǎn)遠(yuǎn)優(yōu)于直接操作 DOM。Vue 進(jìn)行編譯時(shí)，就是將掛載目標(biāo)的所有子節(jié)點(diǎn)劫持（真的是劫持，通過(guò) append 方法，DOM 中的節(jié)點(diǎn)會(huì)被自動(dòng)刪除）到 DocumentFragment 中，經(jīng)過(guò)一番處理后，再將 DocumentFragment 整體返回插入掛載目標(biāo)。

# 勘誤：flag.append() 應(yīng)為 flag.appendChild()。下同。在 Chrome 中用 append() 竟然正常，沒(méi)報(bào)錯(cuò)。

五、數(shù)據(jù)初始化綁定

以上代碼實(shí)現(xiàn)了任務(wù)一，我們可以看到，hello world已經(jīng)呈現(xiàn)在輸入框和文本節(jié)點(diǎn)中。

六、響應(yīng)式的數(shù)據(jù)綁定

再來(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 方法中主要做兩件事，第一是更新屬性的值，第二留到任務(wù)三再說(shuō)。

任務(wù)二也就完成了，text 屬性值會(huì)與輸入框的內(nèi)容同步變化：

七、訂閱/發(fā)布模式（subscribe&publish）

     text 屬性變化了，set 方法觸發(fā)了，但是文本節(jié)點(diǎn)的內(nèi)容沒(méi)有變化。如何讓同樣綁定到 text 的文本節(jié)點(diǎn)也同步變化呢？這里又有一個(gè)知識(shí)點(diǎn)：訂閱發(fā)布模式。

訂閱發(fā)布模式（又稱(chēng)觀察者模式）定義了一種一對(duì)多的關(guān)系，讓多個(gè)觀察者同時(shí)監(jiān)聽(tīng)某一個(gè)主題對(duì)象，這個(gè)主題對(duì)象的狀態(tài)發(fā)生改變時(shí)就會(huì)通知所有觀察者對(duì)象。

發(fā)布者發(fā)出通知 => 主題對(duì)象收到通知并推送給訂閱者 => 訂閱者執(zhí)行相應(yīng)操作

之前提到的，當(dāng) set 方法觸發(fā)后做的第二件事就是作為發(fā)布者發(fā)出通知：“我是屬性 text，我變了”。文本節(jié)點(diǎn)則是作為訂閱者，在收到消息后執(zhí)行相應(yīng)的更新操作。

八、雙向綁定的實(shí)現(xiàn)

回顧一下，每當(dāng) new 一個(gè) Vue，主要做了兩件事：第一個(gè)是監(jiān)聽(tīng)數(shù)據(jù)：observe(data)，第二個(gè)是編譯 HTML：nodeToFragement(id)。

在監(jiān)聽(tīng)數(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)鍵邏輯是：如何將 watcher 添加到關(guān)聯(lián)屬性的 dep 中。

在編譯 HTML 過(guò)程中，為每個(gè)與 data 關(guān)聯(lián)的節(jié)點(diǎn)生成一個(gè) Watcher。Watcher 函數(shù)中發(fā)生了什么呢？

首先，將自己賦給了一個(gè)全局變量 Dep.target；

其次，執(zhí)行了 update 方法，進(jìn)而執(zhí)行了 get 方法，get 的方法讀取了 vm 的訪問(wèn)器屬性，從而觸發(fā)了訪問(wèn)器屬性的 get 方法，get 方法中將該 watcher 添加到了對(duì)應(yīng)訪問(wèn)器屬性的 dep 中；

再次，獲取屬性的值，然后更新視圖。

最后，將 Dep.target 設(shè)為空。因?yàn)樗侨肿兞?，也?watcher 與 dep 關(guān)聯(lián)的唯一橋梁，任何時(shí)刻都必須保證 Dep.target 只有一個(gè)值。

至此，hello world 雙向綁定就基本實(shí)現(xiàn)了。文本內(nèi)容會(huì)隨輸入框內(nèi)容同步變化，在控制器中修改 vm.text 的值，會(huì)同步反映到文本內(nèi)容中。

看完了這篇文章，相信你對(duì)vue.js雙向綁定是什么意思有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！