- Vue 數據雙向綁定主要是指：數據變化更新視圖，視圖變化更新數據。其中，View變化更新Data，可以通過事件監聽的方式來實現，所以 Vue數據雙向綁定的工作主要是如何根據Data變化更新View。
- 簡述：
- 當你把一個普通的 JavaScript 對象傳入 Vue 實例作為 data 選項，Vue 將遍歷此對象所有的 property，並使用 Object.defineProperty 把這些 property 全部轉為 getter/setter。
- 這些 getter/setter 對用戶來說是不可見的，但是在內部它們讓 Vue 能夠追蹤依賴，在 property 被訪問和修改時通知變更。
- 每個組件實例都對應一個 watcher 實例，它會在組件渲染的過程中把“接觸”過的數據 property 記錄為依賴。之后當依賴項的 setter 觸發時，會通知 watcher，從而使它關聯的組件重新渲染。
深入理解：
- 監聽器 Observer：對數據對象進行遍歷，包括子屬性對象的屬性，利用 Object.defineProperty() 對屬性都加上 setter 和 getter。這樣的話，給這個對象的某個值賦值，就會觸發 setter，那么就能監聽到了數據變化。
- 解析器 Compile：解析 Vue 模板指令，將模板中的變量都替換成數據，然后初始化渲染頁面視圖，並將每個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變動，收到通知，調用更新函數進行數據更新。
- 訂閱者 Watcher：Watcher 訂閱者是 Observer 和 Compile 之間通信的橋梁 ，主要的任務是訂閱 Observer 中的屬性值變化的消息，當收到屬性值變化的消息時，觸發解析器 Compile 中對應的更新函數。每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新——這是一個典型的觀察者模式
- 訂閱器 Dep：訂閱器采用 發布-訂閱 設計模式，用來收集訂閱者 Watcher，對監聽器 Observer 和 訂閱者 Watcher 進行統一管理。
你知道Vue3.x響應式數據原理嗎？
- Vue3.x改用Proxy替代Object.defineProperty。
- 因為Proxy可以直接監聽對象和數組的變化，並且有多達13種攔截方法。並且作為新標准將受到瀏覽器廠商重點持續的性能優化。
- Proxy只會代理對象的第一層，Vue3是怎樣處理這個問題的呢？
- 判斷當前Reflect.get的返回值是否為Object，如果是則再通過reactive方法做代理， 這樣就實現了深度觀測。
- 監測數組的時候可能觸發多次get/set，那么如何防止觸發多次呢？我們可以判斷key是否為當前被代理對象target自身屬性，也可以判斷舊值與新值是否相等，只有滿足以上兩個條件之一時，才有可能執行trigger。
Proxy 與 Object.defineProperty 優劣對比
- Proxy 的優勢如下:
- Proxy 可以直接監聽對象而非屬性；
- Proxy 可以直接監聽數組的變化；
- Proxy 有多達 13 種攔截方法,不限於 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具備的；
- Proxy 返回的是一個新對象,我們可以只操作新的對象達到目的,而 Object.defineProperty 只能遍歷對象屬性直接修改；
- Proxy 作為新標准將受到瀏覽器廠商重點持續的性能優化，也就是傳說中的新標准的性能紅利；
- Object.defineProperty 的優勢如下:
- 兼容性好，支持 IE9，而 Proxy 的存在瀏覽器兼容性問題,而且無法用 polyfill 磨平，因此 Vue 的作者才聲明需要等到下個大版本( 3.0 )才能用 Proxy 重寫。
鏈接：https://juejin.im/post/5ec358126fb9a0432a3c49e6