Vue2 響應式原理

咱們常常用vue的雙向綁定，改變data的某個屬性值，vue就立刻幫咱們自動更新視圖，下面咱們看看原理。

Object的響應式原理：

 

能夠看到，其實核心就是把object的全部屬性都加上getter、setter，get時收集依賴，set時通知依賴，達到響應式更新的目的。

可是顯而易見的，這種方法沒法監測到data增長屬性和刪除屬性的動做

Array的響應式原理：

 

能夠看到array的原理和object相似，可是由於大多數狀況下都不是set，而是一些操做數組的方法(push、pull、shift...)，因此咱們加了一層攔截器去通知Dep。

而array裏面的元素若是是object類型的話，就跟上面object類型同樣轉Observer來實現響應式

可是這樣設計的缺陷也顯而易見，就是直接修改元素(array[0]=123)、直接操做array.length這樣的操做，vue是沒法監聽到的。

 

爲了把上面提到的缺陷修補，vue3會用proxy來重寫observer。