仿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