Vue如何實現(xiàn)響應(yīng)式系統(tǒng)
前言
最近深入學(xué)習(xí)了Vue實現(xiàn)響應(yīng)式的部分源碼，將我的些許收獲和思考記錄下來，希望能對看到這篇文章的人有所幫助。有什么問題歡迎指出，大家共同進步。
什么是響應(yīng)式系統(tǒng)
一句話概括：數(shù)據(jù)變更驅(qū)動視圖更新。這樣我們就可以以“數(shù)據(jù)驅(qū)動”的思維來編寫我們的代碼，更多的關(guān)注業(yè)務(wù)，而不是dom操作。其實Vue響應(yīng)式的實現(xiàn)是一個變化追蹤和變化應(yīng)用的過程。
vue響應(yīng)式原理
以數(shù)據(jù)劫持方式，攔截數(shù)據(jù)變化；以依賴收集方式，觸發(fā)視圖更新。利用es5 Object.defineProperty攔截數(shù)據(jù)的setter、getter；getter收集依賴，setter觸發(fā)依賴更新，而組件render也會變?yōu)橐粋€watcher callback被加入相應(yīng)數(shù)據(jù)的依賴中。
發(fā)布訂閱
利用發(fā)布訂閱設(shè)計模式實現(xiàn)，Observer作為發(fā)布者，Watcher作為訂閱者，兩者無直接交互，通過Dep進行統(tǒng)一調(diào)度。
Observer負(fù)責(zé)攔截get, set；get時觸發(fā)dep添加依賴，set時調(diào)度dep發(fā)布；添加Watcher時會觸發(fā)訂閱數(shù)據(jù)的get，并加入到dep調(diào)度中心的訂閱者隊列中。
以下的UML類圖是Vue實現(xiàn)響應(yīng)式功能的類，以及他們之間的引用關(guān)系。
只包含部分屬性方法
上圖中的類已經(jīng)標(biāo)識的蠻清楚了，但是還是需要一個調(diào)用關(guān)系圖，讓調(diào)用過程更加清晰，如下圖所示。
響應(yīng)式data對象中，每一項key的劫持get/set函數(shù)都閉包了Dep調(diào)度實例，這張圖顯示了一個key更改過程中的數(shù)據(jù)流轉(zhuǎn)。
部分源碼
數(shù)據(jù)變更過程中的訂閱/發(fā)布模型上圖已經(jīng)清晰的展示了，從圖中我們已經(jīng)知道了可以通過增加watcher來訂閱某一項數(shù)據(jù)的變更。那么，我們只需要把組件render作為一個watcher訂閱的話，數(shù)據(jù)驅(qū)動視圖的渲染豈不是水到渠成了。Vue正是這么做的！
以下代碼片段來自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')
}
一些問題思考
#person賦值新的對象，新對象里的屬性是否也是響應(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)式的。
原因：因為Vue劫持set時，會對value再次做observe，源碼如下。
function reactiveSetter (newVal) {
/* ...省略部分代碼 */
// 這里會再次對新的value做攔截
childOb = observe(newVal)
dep.notify()
}
#當(dāng)我們監(jiān)聽多層屬性時，上層引用變更，是否會觸發(fā)回調(diào)？
var vm = new Vue({
data: () => ({
person: {name: '令狐洋蔥'}
}),
watch: {
'person.name'(val) {
console.log('name updated', val)
}
}
})
vm.person = {}
答案：會。
原因：person.name作為一個表達式傳入Watcher時，會被解析成類似這樣的函數(shù)
() => {this.vm.person.name}
這樣就會先觸發(fā)person get, 然后觸發(fā)name get；所以我們配置的回調(diào)函數(shù)，不僅僅加入到了name依賴中，person也有。
#接著上個問題，person如果被賦值了新的對象，老對象和老對象上的依賴如何垃圾回收的？
- 老對象的回收：由于老對象的直接引用只有vue實例上的person，person切換到了新的引用，所以老對象沒有引用了，就會被回收掉。
- 老對象上的依賴dep，watcher的依賴里還存在；但是在run執(zhí)行時，會調(diào)用watcher的get() 獲取當(dāng)前值；get中會執(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時，回調(diào)函數(shù)是否會觸發(fā)多次？
var vm = new Vue({
data: () => ({
person: {name: '令狐洋蔥'}
}),
watch: {
'person.name': (val) {
console.log('name updated: ' + val)
}
}
})
vm.person = {name: 'zs'}
vm.person.name = '無敵'
答案: 不會，因為watch回調(diào)函數(shù)執(zhí)行是異步的，且會去重?？梢酝ㄟ^sync強制配置成同步run，就會執(zhí)行2次了。
自己實現(xiàn)一個響應(yīng)式系統(tǒng)
只包含核心功能，具體源碼可以看這里https://github.com/Zenser/z-vue，歡迎來star。
實現(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時綁定訂閱者
if (Dep.target) {
// 綁定訂閱者
dep.addSub(Dep.target)
}
return value
},
set(newVal) {
value = newVal
// 更新時，觸發(fā)訂閱者更新
dep.notify()
}
})
// 對象監(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 中使用lodash對事件進行防抖和節(jié)流操作
這篇文章主要介紹了Vue 中使用lodash對事件進行防抖和節(jié)流操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本文主要介紹了vue動態(tài)修改頁面title的兩種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
在這篇文章中,我們將學(xué)習(xí)一下 Vue3 的全局組件注冊是如何實現(xiàn)的,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
vue項目實現(xiàn)背景顏色以及下劃線從左到右漸變動畫效果
這篇文章主要介紹了vue項目實現(xiàn)背景顏色以及下劃線從左到右漸變動畫效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
遞歸?簡單來講就是程序自己調(diào)用自身,vue中的遞歸組件就是,組件自身調(diào)用自身,下面這篇文章主要給大家介紹了關(guān)于Vue3遞歸組件的用法,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了axios攜帶cookie配置詳解(axios+koa)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
說起canvas是css3新增的標(biāo)簽,而餅狀圖又是canvas經(jīng)典,我們公司現(xiàn)在正在用uni-app框架去研發(fā)APP,下面這篇文章主要給大家介紹了關(guān)于Vue和uniapp中該如何使用canvas的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue項目中icon亂碼的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)全選、反選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了Vuex 單狀態(tài)庫與多模塊狀態(tài)庫詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12