從很久之前就已經接觸過了angularjs了，當時就已經瞭解到，angularjs是通過髒檢查來實現數據監測以及頁面更新渲染。之後，再接觸了vue.js，當時也一度很好奇vue.js是如何監測數據更新並且重新渲染頁面。今天，就我們就來一步步解析vue.js響應式的原理，並且來實現一個簡單的demo。
一、 Vue與MVVM
Mvvm模式是Model-View-Viewmodel的縮寫，它是一種基於前端開發的架構模式，其核心是提供對View和ViewModel的雙向數據綁定，這使得ViewModel的狀態可以自動傳遞給View，即所謂的數據雙向綁定。
View層--> 在Vue中綁定dom對象的HTML
ViewModel --> 在Vue中是實例的vm對象
Model層 -->在Vue中是data、computed、methods …中的數據
在Model層的數據發生變化，View層會在ViewModel的作用下，實現自動更新
二、e的響應式原理
我們在使用Vue的時候，賦值屬性獲得屬性都是直接使用Vue的實例
我們在設計屬性值的時候，頁面的數據會更新
Vue2.0中使用js中的Object.defineProperty來實現對數據的監聽，來看一下代碼
我們來看一下代碼，我們通過Object.defineProperty給o對象添加了age：19，這裡需要注意的是enumerable是設置你的元素是否可以枚舉，如果不可以枚舉的話那麼你的元素將是暗的。Writable是用來設計是否可以修改我們的屬性，同樣wtitable也可以被get和set替換
上面的代碼我們如果使用o.gender來訪問數據，就會調用get方法（getter，讀取器），如果我們給o.gender賦值就會調用這個set方法，並將我們的值賦值給_gender.
但在實例的項目的我們的數據一般都是層層嵌套的：
像上面這種 ，那麼我們怎麼解決呢？？？
對於對象我們可以使用遞歸來響應式化，但是數組我們也需要處理。
我們要怎麼做呢？
先說一下思路：
在改變數組的時候，要發出通知：
o Vue 2 中的缺陷, 數組發生變化, 設置 length 沒法通知 ( Vue 3 中使用 Proxy 語法 ES6 的語法解決了這個問題 )
加入的元素應該變成響應式的
o 這裡有個小技巧：如果一個函數已經定義了，但是我們需要擴展其功能，我們一般的處理辦法：
使用一個臨時的函數名存儲函數
重新定義原來的函數
定義擴展的功能
調用臨時的那個函數
下面來看下代碼：
我們在這裡了定義我們的data，裡面存儲了一些複雜的數據
函數內部就是一個局部作用域，這個value就只在函數內使用的變量（閉包）
將對象o對象響應式化，
我們在這個函數中判斷是不是引用類型，判斷是不是數組。如果引用類型就需要遞歸，如果不是就不用遞歸。如果不是引用類型，需要使用defineReactive將其變成響應式的，但如果是引用類型，還是需要調用defineReactive將其變成響應式的，如果是數組的話，就循環數組，將數組裡面的元素進行相應實化.
三、總結
這樣，一個簡單的響應式數據監聽就完成了。當然，這個也只是一個簡單的demo，來說明vue.js響應式的原理，真實的vue.js源碼會更加複雜，因為加了很多其他邏輯。
之後的文章也會帶大家深入Vue源碼中去深入瞭解Vue的響應式還有哪些，最後希望這篇文章能給你們帶來知識上的一些收穫。
閱讀更多 極光學苑 的文章
