摘要:最近出去面試,栽在這個問題上,提到,面試官一般會讓你說的特點,一般就要回答以及數據雙向綁定然后面試官會追問你,是如何實現數據雙向綁定的,前面的問題算基礎的話,能答出這個就更上一個臺階,說明你的思考能力不停留在表層,遺憾的是我只能大概說出。
最近出去面試,栽在這個問題上,提到vuejs,面試官一般會讓你說vuejs的特點,一般就要回答virtual dom tree, dom tree diff, 以及數據雙向綁定,然后面試官會追問你,vuejs是如何實現數據雙向綁定的,前面的問題算基礎的話,能答出這個就更上一個臺階,說明你的思考能力不停留在表層,遺憾的是我只能大概說出Object.defineProperty。
我回來搜了一下,發現其實vuejs的官網對這個原理是有詳盡的闡釋的,如果失敗了只能怪自己準備不足。這篇文章我就整理一下分享給大家,如果有錯誤還請指出。
vuejs官網對這個問題的解釋是 對響應式原理的解釋,這里:https://cn.vuejs.org/v2/guide...
問題就是vuejs如何追蹤對象的屬性變化,答是利用es5的Object.defineProperty,參考:https://developer.mozilla.org...
Object.defineProperty是一個無法被shim的屬性,就是說它無法被降級使用,這也是vuejs不支持ie8以下的根本原因。
Object.defineProperty用來設置一個對象的某一個屬性,這都不是最關鍵的,關鍵是在設置屬性的同時,可以設置setter/getter,setter/getter設置兩個函數,在這個屬性被調用或者設置的時候自動執行,所以在setter的函數里,只要寫了更新dom的方法,就可以在這個屬性變化的時候執行,實現了屬性變化的追蹤。
實際上,vuejs的實現更加復雜,遵照這張流程圖:
vuejs里每一個組件對應了一個watcher,Object.defineProperty是紫色的圓圈,當組件里某一個屬性被get的時候,getter函數會通知Watcher,“說我這有一個屬性被渲染了,你記一下”,然后當這個屬性的setter被觸發(也就是該屬性數據被修改的時候),也會通知Watcher,說“我這有這樣一個東西被改了,你看看在不在你的名單里。”Watcher此時去檢查被改的屬性在不在自己記錄的名單里,如果在,就通知組件渲染程序,讓它再去更新虛擬dom樹。
需要注意的幾個點:1.getter/setter對用戶是不可見的,是在vue內部實現的。
2.js里無法監聽對象屬性的增加或者刪除,所以vue只能在開始data里添加響應式屬性,所以當組件創建完畢,再給這個組件塞一個屬性,這個屬性是無法響應到dom的。
3.vue會在組件初始化的過程中進行getter/setter轉換,所以也無法動態插入新屬性,插入了也是非響應數據,但可以通過Vue.set(object, key, value)方法將屬性加入到后臺可響應的對象中。
4.官網還介紹了更新隊列,上文說的Watcher中的更新會被推入到一個更新隊列中,那么就是說數據更新后不會馬上反映到dom上。
5.但是我們可以通過Vue.nextTick(callback)方法,將這次數據更新馬上反映到dom上,這個方法的callback是dom更新完成的回調。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98933.html
摘要:前端面試題總結持續更新中是哪個組件的屬性模塊的組件。都提供合理的鉤子函數,可以讓開發者定制化地去處理需求。 前端面試題總結——VUE(持續更新中) 1.active-class是哪個組件的屬性? vue-router模塊的router-link組件。 2.嵌套路由怎么定義? 在 VueRouter 的參數中使用 children 配置,這樣就可以很好的實現路由嵌套。 //引入兩個組件 ...
摘要:綁定實現的歷史綁定的基礎是事件。但臟檢查機制隨之帶來的就是性能問題。是谷歌對于簡化雙向綁定機制的嘗試,在中引入。掙扎了一段時間后谷歌團隊宣布收回的提議,并在中完全刪除了實現。自然全軍覆沒其他各大瀏覽器實現的時間也較晚。 綁定實現的歷史 綁定的基礎是 propertyChange 事件。如何得知 viewModel 成員值的改變一直是開發 MVVM 框架的首要問題。主流框架的處理有一下三...
摘要:綁定實現的歷史綁定的基礎是事件。但臟檢查機制隨之帶來的就是性能問題。是谷歌對于簡化雙向綁定機制的嘗試,在中引入。掙扎了一段時間后谷歌團隊宣布收回的提議,并在中完全刪除了實現。自然全軍覆沒其他各大瀏覽器實現的時間也較晚。 綁定實現的歷史 綁定的基礎是 propertyChange 事件。如何得知 viewModel 成員值的改變一直是開發 MVVM 框架的首要問題。主流框架的處理有一下三...
閱讀 2804·2023-04-25 18:46
閱讀 696·2021-11-19 09:40
閱讀 2063·2021-09-28 09:36
閱讀 3374·2021-09-10 11:11
閱讀 3453·2019-08-30 15:55
閱讀 1791·2019-08-30 15:54
閱讀 2589·2019-08-29 16:16
閱讀 3536·2019-08-29 15:08