Vue如何實(shí)現(xiàn)響應(yīng)式系統(tǒng)
前言
最近深入學(xué)習(xí)了Vue實(shí)現(xiàn)響應(yīng)式的部分源碼,將我的些許收獲和思考記錄下來(lái),希望能對(duì)看到這篇文章的人有所幫助。有什么問(wèn)題歡迎指出,大家共同進(jìn)步。
什么是響應(yīng)式系統(tǒng)
一句話概括:數(shù)據(jù)變更驅(qū)動(dòng)視圖更新。這樣我們就可以以“數(shù)據(jù)驅(qū)動(dòng)”的思維來(lái)編寫我們的代碼,更多的關(guān)注業(yè)務(wù),而不是dom操作。其實(shí)Vue響應(yīng)式的實(shí)現(xiàn)是一個(gè)變化追蹤和變化應(yīng)用的過(guò)程。
vue響應(yīng)式原理
以數(shù)據(jù)劫持方式,攔截?cái)?shù)據(jù)變化;以依賴收集方式,觸發(fā)視圖更新。利用es5 Object.defineProperty攔截?cái)?shù)據(jù)的setter、getter;getter收集依賴,setter觸發(fā)依賴更新,而組件render也會(huì)變?yōu)橐粋€(gè)watcher callback被加入相應(yīng)數(shù)據(jù)的依賴中。
發(fā)布訂閱
利用發(fā)布訂閱設(shè)計(jì)模式實(shí)現(xiàn),Observer作為發(fā)布者,Watcher作為訂閱者,兩者無(wú)直接交互,通過(guò)Dep進(jìn)行統(tǒng)一調(diào)度。
Observer負(fù)責(zé)攔截get, set;get時(shí)觸發(fā)dep添加依賴,set時(shí)調(diào)度dep發(fā)布;添加Watcher時(shí)會(huì)觸發(fā)訂閱數(shù)據(jù)的get,并加入到dep調(diào)度中心的訂閱者隊(duì)列中。
以下的UML類圖是Vue實(shí)現(xiàn)響應(yīng)式功能的類,以及他們之間的引用關(guān)系。
只包含部分屬性方法
上圖中的類已經(jīng)標(biāo)識(shí)的蠻清楚了,但是還是需要一個(gè)調(diào)用關(guān)系圖,讓調(diào)用過(guò)程更加清晰,如下圖所示。
響應(yīng)式data對(duì)象中,每一項(xiàng)key的劫持get/set函數(shù)都閉包了Dep調(diào)度實(shí)例,這張圖顯示了一個(gè)key更改過(guò)程中的數(shù)據(jù)流轉(zhuǎn)。
部分源碼
數(shù)據(jù)變更過(guò)程中的訂閱/發(fā)布模型上圖已經(jīng)清晰的展示了,從圖中我們已經(jīng)知道了可以通過(guò)增加watcher來(lái)訂閱某一項(xiàng)數(shù)據(jù)的變更。那么,我們只需要把組件render作為一個(gè)watcher訂閱的話,數(shù)據(jù)驅(qū)動(dòng)視圖的渲染豈不是水到渠成了。Vue正是這么做的!
以下代碼片段來(lái)自Vue.prototype._mount函數(shù)
callHook(vm, 'beforeMount') vm._watcher = new Watcher(vm, () => { vm._update(vm._render(), hydrating) }, noop) hydrating = false // manually mounted instance, call mounted on self // mounted is called for render-created child components in its inserted hook if (vm.$vnode == null) { vm._isMounted = true callHook(vm, 'mounted') }
一些問(wèn)題思考
#person賦值新的對(duì)象,新對(duì)象里的屬性是否也是響應(yīng)式的呢?
var vm = new Vue({ el: '#app', data: () => ({ person: null }) }) vm.person = {name: 'zs'} setTimeout(() => { // 更改name vm.person.name = 'finally zs' }, 3000)
答案:是響應(yīng)式的。
原因:因?yàn)?Vue劫持set時(shí),會(huì)對(duì)value再次做observe,源碼如下。
function reactiveSetter (newVal) { /* ...省略部分代碼 */ // 這里會(huì)再次對(duì)新的value做攔截 childOb = observe(newVal) dep.notify() }
#當(dāng)我們監(jiān)聽多層屬性時(shí),上層引用變更,是否會(huì)觸發(fā)回調(diào)?
var vm = new Vue({ data: () => ({ person: {name: '令狐洋蔥'} }), watch: { 'person.name'(val) { console.log('name updated', val) } } }) vm.person = {}
答案:會(huì)。
原因:person.name作為一個(gè)表達(dá)式傳入Watcher時(shí),會(huì)被解析成類似這樣的函數(shù)
() => {this.vm.person.name}
這樣就會(huì)先觸發(fā)person get, 然后觸發(fā)name get;所以我們配置的回調(diào)函數(shù),不僅僅加入到了name依賴中,person也有。
#接著上個(gè)問(wèn)題,person如果被賦值了新的對(duì)象,老對(duì)象和老對(duì)象上的依賴如何垃圾回收的?
- 老對(duì)象的回收:由于老對(duì)象的直接引用只有vue實(shí)例上的person,person切換到了新的引用,所以老對(duì)象沒(méi)有引用了,就會(huì)被回收掉。
- 老對(duì)象上的依賴dep,watcher的依賴里還存在;但是在run執(zhí)行時(shí),會(huì)調(diào)用watcher的get() 獲取當(dāng)前值;get中會(huì)執(zhí)行新的依賴收集,并在收集完畢后,清空老的依賴。
具體源碼如下:
/** * Evaluate the getter, and re-collect dependencies. */ get () { pushTarget(this) const value = this.getter.call(this.vm, this.vm) // "touch" every property so they are all tracked as // dependencies for deep watching if (this.deep) { traverse(value) } popTarget() this.cleanupDeps() return value }
#當(dāng)我們多次同步修改name時(shí),回調(diào)函數(shù)是否會(huì)觸發(fā)多次?
var vm = new Vue({ data: () => ({ person: {name: '令狐洋蔥'} }), watch: { 'person.name': (val) { console.log('name updated: ' + val) } } }) vm.person = {name: 'zs'} vm.person.name = '無(wú)敵'
答案: 不會(huì),因?yàn)閣atch回調(diào)函數(shù)執(zhí)行是異步的,且會(huì)去重??梢酝ㄟ^(guò)sync強(qiáng)制配置成同步run,就會(huì)執(zhí)行2次了。
自己實(shí)現(xiàn)一個(gè)響應(yīng)式系統(tǒng)
只包含核心功能,具體源碼可以看這里https://github.com/Zenser/z-vue,歡迎來(lái)star。
實(shí)現(xiàn)功能非?;A(chǔ)啦,重在理解,功能不全的。
Observer
class Observe { constructor(obj) { Object.keys(obj).forEach(prop => { reactive(obj, prop, obj[prop]) }) } } function reactive(obj, prop) { let value = obj[prop] // 閉包綁定依賴 let dep = new Dep() Object.defineProperty(obj, prop, { configurable: true, enumerable: true, get() { //利用js單線程,在get時(shí)綁定訂閱者 if (Dep.target) { // 綁定訂閱者 dep.addSub(Dep.target) } return value }, set(newVal) { value = newVal // 更新時(shí),觸發(fā)訂閱者更新 dep.notify() } }) // 對(duì)象監(jiān)聽 if (typeof value === 'object' && value !== null) { Object.keys(value).forEach(valueProp => { reactive(value, valueProp) }) } }
Dep
class Dep { constructor() { this.subs = [] } addSub(sub) { if (this.subs.indexOf(sub) === -1) { this.subs.push(sub) } } notify() { this.subs.forEach(sub => { const oldVal = sub.value sub.cb && sub.cb(sub.get(), oldVal) }) } }
Watcher
class Watcher { constructor(data, exp, cb) { this.data = data this.exp = exp this.cb = cb this.get() } get() { Dep.target = this this.value = (function calcValue(data, prop) { for (let i = 0, len = prop.length; i < len; i++ ) { data = data[prop[i]] } return data })(this.data, this.exp.split('.')) Dep.target = null return this.value } }
相關(guān)文章
vue項(xiàng)目中使用particles實(shí)現(xiàn)粒子背景效果及遇到的坑(按鈕沒(méi)有點(diǎn)擊響應(yīng))
為了提高頁(yè)面展示效果,登錄界面內(nèi)容比較單一的,粒子效果作為背景經(jīng)常使用到,vue工程中利用vue-particles可以很簡(jiǎn)單的實(shí)現(xiàn)頁(yè)面的粒子背景效果,本文給大家分享在實(shí)現(xiàn)過(guò)程中遇到問(wèn)題,需要的朋友一起看看吧2020-02-02vue-router 基于后端permissions動(dòng)態(tài)生成導(dǎo)航菜單的示例代碼
本文主要介紹了vue-router 基于后端permissions動(dòng)態(tài)生成導(dǎo)航菜單的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09Vue實(shí)現(xiàn)導(dǎo)入Excel功能步驟詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)導(dǎo)入Excel功能,本文分步驟給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-07-07vue3如何通過(guò)provide和inject實(shí)現(xiàn)多層級(jí)組件通信
這篇文章主要介紹了vue3如何通過(guò)provide和inject實(shí)現(xiàn)多層級(jí)組件通信,本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11Element-UI介紹主題定制、自定義組件和插件擴(kuò)展的代碼示例
本文介紹了使用Element-UI實(shí)現(xiàn)主題定制、自定義組件和擴(kuò)展插件的方法和實(shí)用案例,在開發(fā)過(guò)程中,我們可以根據(jù)自己的需求,靈活選擇相關(guān)的技術(shù)手段,并不斷探索和嘗試,以提高開發(fā)效率和用戶體驗(yàn),感興趣的朋友跟隨小編一起看看吧2024-02-02Vuex之module使用方法及場(chǎng)景說(shuō)明
這篇文章主要介紹了Vuex之module使用方法及場(chǎng)景說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇
這篇文章主要介紹了詳解vuex之store拆分即多模塊狀態(tài)管理(modules)篇,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11