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