前端面試 vue 部分 (2)——Vue是如何實現雙向綁定的

數據的雙向綁定

當數據發生變化，ViewModel能夠監聽到數據的這種變化，然后通知到對應的視圖做自動更新，而當用戶操作視圖，ViewModel 也能監聽到視圖的變化，然后通知數據做改動，這實際上就實現了數據的雙向綁定

1. Vue.js 是采用 Object.defineProperty 的 getter 和 setter ，並結合 觀察者模式 來實現數據綁定的。
2. 當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，並用Object.defineProperty（）方法把它們轉化為 getter/setter方法。當data中的屬性被訪問時，則會調用getter方法；當data中的屬性被改變時，則會調用setter方法
3. 名詞解釋

• 監聽器 Observer ：利用 Object.defineProperty() 對屬性都加上 setter 和 getter實現數據劫持
• 解析器 Compile ：解析 Vue 模板指令，將模板中的變量都替換成數據，然后初始化渲染頁面視圖
• 訂閱者 Watcher ：Watcher 訂閱者是 Observer 和 Compile 之間通信的橋梁 ，主要的任務是訂閱 Observer 中的屬性值變化的消息，當收到屬性值變化的消息時，觸發解析器 Compile 中對應的更新函數。
• 訂閱器 Dep ：用來收集訂閱者 Watcher，對監聽器 Observer 和 訂閱者 Watcher 進行統一管理。

4. 詳解（ 參考鏈接）

   1. 首先我們需要設置一個 監聽器Observer ， 對數據對象進行遍歷，包括子屬性對象的屬性，利用 Object.defineProperty() **** 對屬性都加上 setter 和 getter 。這樣的話，給這個對象的某個值賦值，就會觸發 setter，那么就能監聽到了數據變化 。如果屬性發上變化了，就需要告訴訂閱者Watcher看是否需要更新。
   2. 因為訂閱者是有很多個，所以我們需要有一個 消息訂閱器Dep 來專門收集這些訂閱者，然后在監聽器Observer和訂閱者Watcher之間進行統一管理的。
   3. 接着，我們還需要有一個 指令解析器Compile ， 解析 Vue 模板指令，將模板中的變量都替換成數據，然后初始化渲染頁面視圖，並將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動， 訂閱者Watcher 收到通知，調用更新函數進行數據更新
   4. 此時當 訂閱者Watcher 接收到相應屬性的變化，就會執行對應的更新函數，從而更新視圖。
      歡迎留言~~~