前言

成都創(chuàng)新互聯(lián)服務(wù)項目包括武城網(wǎng)站建設(shè)、武城網(wǎng)站制作、武城網(wǎng)頁制作以及武城網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，武城網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到武城省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

最近深入學(xué)習(xí)了Vue實現(xiàn)響應(yīng)式的部分源碼，將我的些許收獲和思考記錄下來，希望能對看到這篇文章的人有所幫助。有什么問題歡迎指出，大家共同進(jìn)步。

什么是響應(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進(jìn)行統(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')
}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站名稱：Vue如何實現(xiàn)響應(yīng)式系統(tǒng)-創(chuàng)新互聯(lián)
鏈接地址：http://sd-ha.com/article32/dcehsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、自適應(yīng)網(wǎng)站、App設(shè)計、標(biāo)簽優(yōu)化、建站公司、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)