仿VUE建立響應式資料

孩子他爹發表於2021-04-08

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方法。

具體程式碼詳見:https://github.com/dongyinghao/reactive

相關文章