Vue 中怎么實(shí)現(xiàn)數(shù)據(jù)雙向綁定

本篇文章給大家分享的是有關(guān) Vue 中怎么實(shí)現(xiàn)數(shù)據(jù)雙向綁定，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

MVVM 架構(gòu)的優(yōu)點(diǎn)

• 低耦合。視圖(View)可以獨(dú)立于 Model 變化和修改，一個(gè) ViewModel 可以綁定到不同的 "View" 上，當(dāng) View 變化的時(shí)候 Model 可以不變，當(dāng) Model 變化的時(shí)候 View 也可以不變。

• 可重用性。你可以把一些視圖邏輯放在一個(gè) ViewModel 里面，讓很多 View 重用這段視圖邏輯。

• 獨(dú)立開(kāi)發(fā)。開(kāi)發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開(kāi)發(fā)(ViewModel)，設(shè)計(jì)人員可以專注于頁(yè)面設(shè)計(jì)。

• 方便測(cè)試。界面素來(lái)是比較難于測(cè)試的，開(kāi)發(fā)中大部分 Bug 來(lái)至于邏輯處理，由于 ViewModel 分離了許多邏輯，可以對(duì) ViewModel 構(gòu)造單元測(cè)試。

Vue專注于MVVM實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定，雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來(lái)，而View 和 Model 之間的同步工作完全是自動(dòng)的，無(wú)需人為干涉，因此開(kāi)發(fā)者只需關(guān)注業(yè)務(wù)邏輯，不需要手動(dòng)操作DOM， 不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問(wèn)題，復(fù)雜的數(shù)據(jù)狀態(tài)維護(hù)完全由 MVVM 來(lái)統(tǒng)一管理。大大方便了數(shù)據(jù)狀態(tài)的維護(hù)與管理

Vue 對(duì)于 MVVM 架構(gòu)的實(shí)踐

上面我們了解了MVVM的優(yōu)點(diǎn)，那么下面就讓我們來(lái)分析一下Vue.js對(duì)于MVVM的實(shí)踐，數(shù)據(jù)雙向綁定的原理實(shí)現(xiàn)吧，先來(lái)看下面這張圖

Vue.js使用 Object.defineProperty 中的getter 和 setter來(lái)對(duì)對(duì)象中的屬性進(jìn)行操作，結(jié)合了觀察者模式來(lái)實(shí)現(xiàn)數(shù)據(jù)綁定。

簡(jiǎn)單分析一下流程：一個(gè) JS 對(duì)象作為數(shù)據(jù)傳給Vue 實(shí)例時(shí)，Vue 會(huì)遍歷它的屬性，并使用Object.defineProperty 將它們轉(zhuǎn)化為 getter/setter，Vue在內(nèi)部會(huì)對(duì)它們監(jiān)聽(tīng)，在屬性被訪問(wèn)或修改時(shí)及時(shí)進(jìn)行通知

在分析Vue 的雙向數(shù)據(jù)綁定之前，我們先了解上圖中各個(gè)位置的作用

• Observer ：數(shù)據(jù)監(jiān)聽(tīng)器，對(duì)Vue的數(shù)據(jù)對(duì)象中所有屬性進(jìn)行監(jiān)聽(tīng)，一旦屬性發(fā)生改變，將最新值傳給watcher(訂閱者)

• Compile ：指令編譯器，對(duì)每個(gè)DOM元素節(jié)點(diǎn)指令進(jìn)行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應(yīng)的更新函數(shù)

• Dep ：消息訂閱器，內(nèi)部有一個(gè)維護(hù)的數(shù)組用來(lái)收集訂閱者(Watcher)，如果數(shù)據(jù)發(fā)生變動(dòng)，則觸發(fā)notify 函數(shù)，然后調(diào)用wacher訂閱者的 update 方法

Watcher ：訂閱者，連接observer 與compile，獲取屬性變化的通知，并將數(shù)據(jù)及時(shí)更新到視圖當(dāng)中

讓我們一步一步來(lái)捋Vue中數(shù)據(jù)雙向綁定的步驟，流程大致可以分為兩個(gè)階段

一個(gè)是初始化階段，一個(gè)是數(shù)據(jù)更新階段

初始化階段

執(zhí)行new Vue() ，Vue進(jìn)入初始化階段 ,此時(shí)開(kāi)始兩個(gè)操作，一個(gè)是數(shù)據(jù)監(jiān)聽(tīng)，一個(gè)是頁(yè)面渲染。

一方面 Vue 會(huì)遍歷 data 選項(xiàng)中的屬性，并用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter，實(shí)現(xiàn)數(shù)據(jù)變化監(jiān)聽(tīng)功能。

另一方面，指令編譯器Compile 對(duì)元素節(jié)點(diǎn)的指令進(jìn)行掃描和解析，初始化視圖，并訂閱 Watcher 來(lái)更新視圖。此時(shí)wacher 會(huì)將自己添加到消息訂閱器中(Dep)，初始化完畢。

數(shù)據(jù)更新階段

當(dāng)data數(shù)據(jù)中有屬性發(fā)生變化時(shí)，Observer 中的 setter 方法被觸發(fā)，setter 會(huì)立即調(diào)用Dep.notify()，隨后Dep 開(kāi)始遍歷所有的訂閱者，對(duì)訂閱者Watcher發(fā)送通知，并且會(huì)調(diào)用訂閱者的 update 方法，最后，訂閱者Watcher收到Dep的數(shù)據(jù)更新的通知后，也會(huì)對(duì)視圖進(jìn)行相應(yīng)的更新。

以上就是 Vue 中怎么實(shí)現(xiàn)數(shù)據(jù)雙向綁定，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。