Vue如何實現雙向綁定(上)

前言

Vue的雙向綁定特性一直廣受人們歡迎，可是你們知道實現雙向綁定的原理嗎？這篇文章將給你們介紹實現雙向綁定的原理。

原文戳我

爲何會出現MVVM

什麼是MVC

MVC即Model-View-Controller的縮寫，就是模型-視圖-控制器 , 也就是說一個標準的Web 應用程序是由這三部分組成的。

Model：管理數據。
View：UI佈局，展現數據。
Controller：響應用戶操做，並將Model更新到 View 上。

MVC的缺點

這種MVC架構模式對於簡單的應用來看起是OK的，也符合軟件架構的分層思想。 但實際上，隨着H5 的不斷髮展，人們更但願使用H5開發的應用能和Native媲美，或者接近於原生App的體驗效果，因而前端應用的複雜程度已不一樣往日，今非昔比。這時前端開發就暴露出了三個痛點問題：

• 開發者在代碼中大量調用相同的DOM API, 處理繁瑣 ，操做冗餘，使得代碼難以維護。
• 大量的DOM操做使頁面渲染性能下降，加載速度變慢，影響用戶體驗。
• 當Model頻繁發生變化，開發者須要主動更新到View。當用戶的操做致使Model發生變化，開發者一樣須要將變化的數據同步到Model中，這樣的工做不只繁瑣，並且很難維護複雜多變的數據狀態。

什麼是MVVM

MVVM即Model-View-ViewModel的縮寫，就是模型-視圖-視圖模型，也就是說一個標準的Web 應用程序是由這三部分組成的。

Model：表明數據模型，也能夠在Model中定義數據修改和操做的業務邏輯。 View：表明UI組件，它負責將數據模型轉化成UI 展示出來。 ViewModel：是一個同步View 和 Model的對象。

MVVM的優勢

在MVVM架構下，View和Model之間並無直接的聯繫，而是經過ViewModel進行交互，Model 和 ViewModel 之間的交互是雙向的， 所以View 數據的變化會同步到Model中，而Model 數據的變化也會當即反應到View 上。

ViewModel經過雙向數據綁定把View層和Model層鏈接了起來，而View和Model之間的同步工做徹底是自動的，無需人爲干涉，所以開發者只需關注業務邏輯，不須要手動操做DOM,不須要關注數據狀態的同步問題，複雜的數據狀態維護徹底由MVVM來統一管理。

雙向綁定

如何理解雙向綁定

簡單來講就是用戶更新了視圖，Model也隨之更新就稱爲雙向綁定。再說細點，就是在單向綁定的基礎上給可輸入元素（input、textare等）添加了change(input)事件,(change事件觸發，View的狀態就被更新了)來動態修改model。

雙向綁定原理

Observer： 數據監聽器，可以對數據對象的全部屬性進行監聽，若有變更可拿到最新值並通知訂閱者，內部採用Object.defineProperty的getter和setter來實現。
Dep：消息訂閱器，內部維護了一個數組，用來收集訂閱者（Watcher），數據變更觸發notify 函數，再調用訂閱者的 update 方法。
Watcher：訂閱者,做爲鏈接Observer和Compile的橋樑，可以訂閱並收到每一個屬性變更的通知，執行指令綁定的相應回調函數。
Compile：指令解析器，它的做用對每一個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數。