前言
松滋網(wǎng)站建設公司成都創(chuàng)新互聯(lián),松滋網(wǎng)站設計制作,有大型網(wǎng)站制作公司豐富經(jīng)驗。已為松滋上千余家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設要多少錢,請找那個售后服務好的松滋做網(wǎng)站的公司定做!
最近深入學習了Vue實現(xiàn)響應式的部分源碼,將我的些許收獲和思考記錄下來,希望能對看到這篇文章的人有所幫助。有什么問題歡迎指出,大家共同進步。
什么是響應式系統(tǒng)
一句話概括:數(shù)據(jù)變更驅(qū)動視圖更新。這樣我們就可以以“數(shù)據(jù)驅(qū)動”的思維來編寫我們的代碼,更多的關注業(yè)務,而不是dom操作。其實Vue響應式的實現(xiàn)是一個變化追蹤和變化應用的過程。
vue響應式原理
以數(shù)據(jù)劫持方式,攔截數(shù)據(jù)變化;以依賴收集方式,觸發(fā)視圖更新。利用es5 Object.defineProperty攔截數(shù)據(jù)的setter、getter;getter收集依賴,setter觸發(fā)依賴更新,而組件render也會變?yōu)橐粋€watcher callback被加入相應數(shù)據(jù)的依賴中。
發(fā)布訂閱
利用發(fā)布訂閱設計模式實現(xiàn),Observer作為發(fā)布者,Watcher作為訂閱者,兩者無直接交互,通過Dep進行統(tǒng)一調(diào)度。
Observer負責攔截get, set;get時觸發(fā)dep添加依賴,set時調(diào)度dep發(fā)布;添加Watcher時會觸發(fā)訂閱數(shù)據(jù)的get,并加入到dep調(diào)度中心的訂閱者隊列中。
以下的UML類圖是Vue實現(xiàn)響應式功能的類,以及他們之間的引用關系。
只包含部分屬性方法
上圖中的類已經(jīng)標識的蠻清楚了,但是還是需要一個調(diào)用關系圖,讓調(diào)用過程更加清晰,如下圖所示。
響應式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賦值新的對象,新對象里的屬性是否也是響應式的呢?
var vm = new Vue({ el: '#app', data: () => ({ person: null }) }) vm.person = {name: 'zs'} setTimeout(() => { // 更改name vm.person.name = 'finally zs' }, 3000)
答案:是響應式的。
原因:因為Vue劫持set時,會對value再次做observe,源碼如下。
function reactiveSetter (newVal) { /* ...省略部分代碼 */ // 這里會再次對新的value做攔截 childOb = observe(newVal) dep.notify() }
#當我們監(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如果被賦值了新的對象,老對象和老對象上的依賴如何垃圾回收的?
具體源碼如下:
/** * 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 }
#當我們多次同步修改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)一個響應式系統(tǒng)
只包含核心功能,具體源碼可以看這里https://github.com/Zenser/z-vue,歡迎來star。
實現(xiàn)功能非常基礎啦,重在理解,功能不全的。
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 } }
參考文檔:https://cn.vuejs.org/v2/guide/reactivity.html
網(wǎng)站標題:Vue如何實現(xiàn)響應式系統(tǒng)
標題鏈接:http://muchs.cn/article18/gedhgp.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設、企業(yè)建站、云服務器、App開發(fā)、網(wǎng)站收錄、網(wǎng)站導航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)