Vue 中怎么實現數據雙向綁定

本篇文章給大家分享的是有關 Vue 中怎么實現數據雙向綁定，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

MVVM 架構的優點

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

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

• 獨立開發。開發人員可以專注于業務邏輯和數據的開發(ViewModel)，設計人員可以專注于頁面設計。

• 方便測試。界面素來是比較難于測試的，開發中大部分 Bug 來至于邏輯處理，由于 ViewModel 分離了許多邏輯，可以對 ViewModel 構造單元測試。

Vue專注于MVVM實現了數據的雙向綁定，雙向數據綁定把 View 層和 Model 層連接了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM， 不需要關注數據狀態的同步問題，復雜的數據狀態維護完全由 MVVM 來統一管理。大大方便了數據狀態的維護與管理

Vue 對于 MVVM 架構的實踐

上面我們了解了MVVM的優點，那么下面就讓我們來分析一下Vue.js對于MVVM的實踐，數據雙向綁定的原理實現吧，先來看下面這張圖

Vue.js使用 Object.defineProperty 中的getter 和 setter來對對象中的屬性進行操作，結合了觀察者模式來實現數據綁定。

簡單分析一下流程：一個 JS 對象作為數據傳給Vue 實例時，Vue 會遍歷它的屬性，并使用Object.defineProperty 將它們轉化為 getter/setter，Vue在內部會對它們監聽，在屬性被訪問或修改時及時進行通知

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

• Observer ：數據監聽器，對Vue的數據對象中所有屬性進行監聽，一旦屬性發生改變，將最新值傳給watcher(訂閱者)

• Compile ：指令編譯器，對每個DOM元素節點指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數

• Dep ：消息訂閱器，內部有一個維護的數組用來收集訂閱者(Watcher)，如果數據發生變動，則觸發notify 函數，然后調用wacher訂閱者的 update 方法

Watcher ：訂閱者，連接observer 與compile，獲取屬性變化的通知，并將數據及時更新到視圖當中

讓我們一步一步來捋Vue中數據雙向綁定的步驟，流程大致可以分為兩個階段

一個是初始化階段，一個是數據更新階段

初始化階段

執行new Vue() ，Vue進入初始化階段 ,此時開始兩個操作，一個是數據監聽，一個是頁面渲染。

一方面 Vue 會遍歷 data 選項中的屬性，并用 Object.defineProperty 將它們轉為 getter/setter，實現數據變化監聽功能。

另一方面，指令編譯器Compile 對元素節點的指令進行掃描和解析，初始化視圖，并訂閱 Watcher 來更新視圖。此時wacher 會將自己添加到消息訂閱器中(Dep)，初始化完畢。

數據更新階段

當data數據中有屬性發生變化時，Observer 中的 setter 方法被觸發，setter 會立即調用Dep.notify()，隨后Dep 開始遍歷所有的訂閱者，對訂閱者Watcher發送通知，并且會調用訂閱者的 update 方法，最后，訂閱者Watcher收到Dep的數據更新的通知后，也會對視圖進行相應的更新。

以上就是 Vue 中怎么實現數據雙向綁定，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。