仿VUE創建響應式數據

VUE對於前端開發人員都非常熟悉了,其工作原理估計也都能說的清個大概,具體代碼的實現估計看的人不會太多,這裡對vue響應式數據做個簡單的實現。

先簡單介紹一下VUE數據響應原理,VUE響應數據分為對象和數組,實現方式並不同。

對象的數據響應方式

使用Object.definePrototype()方式對數據劫持,當訪問對象屬性時會收集依賴,當有數據值發生改變時會觸發收集到的依賴的回調方法。

數組的數據響應方式

使用的是重寫能夠改變數組的方法,比如(push、pop、unshift、shift、sort、reverse、splice)共七個,當被訪問的值為數組時會額外再收集一套依賴,當有數據值發生改變時,即調用了改變數組的方法時會觸發收集到的依賴的回調方法。看到這裡也就明白了為什麼使用形如:array[i] = value 的方式改變數組時頁面不會更新了,因為這樣並不會觸發回調,只有使用了改變數組的方法才會觸發回調。

項目目標:

數據發生改變,調用回調方法,並注入改變前和改變後的數據。

形如:watch(‘data’, (new, old) => {console.log(new, old)})

監聽data數據的變化,無論data是對象還是數組,如果有值發生改變均會調用cb方法。

具體代碼詳見://github.com/dongyinghao/reactive

Tags: