用本身的話總結vue雙向綁定數據原理

你們好，我是前端鼓勵師maybe，做爲前端，掌握vue框架能夠說是必須滴，那麼vue的雙向數據綁定原理想必是要深刻了解的一個知識點，那麼你瞭解的雙向綁定原理又是怎麼樣的呢？無論怎樣，請給我一首歌的時間，我給你用官方的口吻講解一波雙向綁定的整個過程，剩下的半首歌時間我給你用我本身整理的話講解一波，但願你看完個人文章，對vue的雙向數據綁定原理有跟進一步瞭解和理解！

vue是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發響應的監聽回調。

具體步驟

第一步：
須要observer的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上setter和getter這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼久能監聽到了數據變化

第二步：
compile解析橫板令，將模板中的變量替換成數據.而後初始化渲染頁面視圖，並將每一個令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖

第三步：
Watcher訂閱名是 observer和 Compile之間通訊的橋樑，主要作的事情是：
1.在自身實例化時往屬性訂倒器(dep)裏面添加本身
2.自身必須有一個 update()方法
3.待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發Compile中定的回調，則功成身退

第四步:
MVVM做爲數據綁定的入口，合 observer、 Compile和 Watcher三者，經過 Observer來監聽本身的model數據変化，經過 Compile來解析編譯模板指令，最終利用 Watcher搭起 Observer和 Compile之間的通訊標梁，達到數據變化-＞視圖更新新:視圖交互變化(Input)-＞數據mode變動的雙向綁定效果。

以上即是比較官方的口吻講解vue的雙向數據綁定原理，那麼接下來，說說我對雙向數據綁定原理的理解，要理解vue的雙向數據綁定原理那就必須先理解MVC與MVVM模式的區別而後再理解vue的單項數據綁定原理，接下來給你們以圖片和文字結合的方式講解下：

1.MVC和MVVM的區別：

因此從上圖能夠看出來，MVVM設計模式是自動化的，vue就是採起了這種設計模式，咱們能夠發現，真正把數據和視圖分離開的是MVVM模式，並非MVC，由於controller當中有大量手工的DOM操做，只要界面改變，你的controller中的代碼必需要更改（jquery），好比你能夠想象一下，你頁面當中元素的位置變了，你的選擇器是否是確定要變，選擇器就寫在DOM操做裏面，這就是MVC和MVVM兩種設計模式的區別。

2.vue的單項單項數據綁定原理：

單項綁定過程(本身總結的)：變量變了，由set發通知給watcher，watcher告知虛擬DOM樹，叫它該比較了，我這有值變了，因而生成新的dom樹進行一個比較，而後逐級分類比較，比較出哪一個元素髮生變化就把這個元素更新到頁面，這就是單項數據綁定原理。

3.vue雙向數據綁定原理
vue的雙向數據綁定原理，當頁面有一個input元素咋辦，這時候v-model雙向數據綁定就派上用場了，可是v-model雙向數據綁定原理又是怎樣的呢？請看下圖：

v-model原理其實就是給input事件綁定oninput事件 就會馬上調用底層對象對應的setter方法 改變data裏的屬性的值 從而實現雙向數據綁定

通過上面一波騷操做，但願你們能在vue的面試中遇到vue雙向數據綁定原理的問題，可以對答如流，答得儘可能完整一點，若是我還有哪些地方漏了的，請在評論區指出，相互借鑑學習！