這幾天公司使用到vue，所以對vue的數據響應原理非常好奇，不說廢話，直接上我的理解。
Vue.js 的核心包括一套“響應式系統”
“響應式”，是指當數據改變后，Vue會通知到使用該數據的代碼。例如，視圖渲染中使用了數據，數據改變后，視圖也會自動更新。
舉個簡單的例子，對于模板來說.代碼執行后，頁面上對應位置會顯示對應的數據。如果想改變顯示的名字，這樣頁面上就會顯示修改后的名字了，并不需要去手動修改 DOM 更新數據。
ue 的響應式，核心機制是 觀察者模式。數據是被觀察的一方，發生改變時，通知所有的觀察者，這樣觀察者可以做出響應，比如，重新渲染然后更新視圖。數據可以有多個觀察者，怎么記錄這種依賴關系呢？
Vue 通過在 data 和 watcher 間創建一個 dep 對象，來記錄這種依賴關系。dep 的結構很簡單，除了唯一標識屬性 id，另一個屬性就是用于記錄所有觀察者的 subs：
id - number
subs - [Watcher]
再來看 watcher。
Vue 中 watcher 的觀察對象，確切來說是一個求值表達式，或者函數。這個表達式或者函數，在一個 Vue 實例的上下文中求值或執行。這個過程中，使用到數據，也就是 watcher 所依賴的數據。用于記錄依賴關系的屬性是 deps，對應的是由 dep 對象組成的數組，對應所有依賴的數據。而表達式或函數，最終會作為求值函數記錄到 getter 屬性，每次求值得到的結果記錄在 value 屬性：
vm - VueComponent
deps - [Dep]
getter - function
value - *
另外，還有一個重要的屬性 cb，記錄回調函數，當 getter 返回的值與當前 value 不同時被調用：cb - function上面代碼首先創建了一個新的 Vue 實例對象 vm，包含兩個數據字段：name、age。對于這兩個字段，Vue 會分別創建對應的 dep 對象，用于記錄依賴該數據的 watcher。
然后定義了一個求值函數 userInfo，注意，這個函數會在對應的 Vue 示例上下文中執行，也就是說，執行時的 this 對應的就是 vm。回調函數 onUserInfoChange 只是打印出新的 watcher 得到的新的值，由 userInfo 執行后生成。
當然，這只是我的理解。在梳理和寫下這些內容的過程中，我收獲很多，也希望內容能夠對你有所幫助。水平有限，錯漏難免，歡迎指出。最后，感謝閱讀！
【全文完】
版權聲明:
1、弈聰軟件網站內容中凡注明“來源：XXX（非陜西弈聰網站）”的作品，轉載自其它媒體，轉載目的在于傳遞更多信息，其中涉及的網站建設，網站優化，APP開發，微信小程序開發，大數據平臺開發，區塊鏈技術開發等軟件開發技術細節并不代表本站贊同支持其觀點，并不對其真實性負責。對于署名“陜西弈聰”的作品系本站版權所有，任何人轉載請署名來源，否則陜西弈聰將追究其相關法律責任。
2、本站內容中未聲明為“原創”的內容可能源自其它網站，但并不代表本站支持其觀點，對此帶來的法律糾紛及其它責任與我方無關。如果此內容侵犯了您的權益，請聯系我方進行刪除。