前言

創(chuàng)新互聯(lián)服務(wù)緊隨時代發(fā)展步伐，進(jìn)行技術(shù)革新和技術(shù)進(jìn)步，經(jīng)過十年的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計師、專業(yè)的網(wǎng)站實施團(tuán)隊以及高素質(zhì)售后服務(wù)人員，并且完全形成了一套成熟的業(yè)務(wù)流程，能夠完全依照客戶要求對網(wǎng)站進(jìn)行網(wǎng)站建設(shè)、成都網(wǎng)站制作、建設(shè)、維護(hù)、更新和改版，實現(xiàn)客戶網(wǎng)站對外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。

雖然工作中一直使用Vue作為基礎(chǔ)庫，但是對于其實現(xiàn)機(jī)理僅限于道聽途說，這樣對長期的技術(shù)發(fā)展很不利。所以最近攻讀了其源碼的一部分，先把雙向數(shù)據(jù)綁定這一塊的內(nèi)容給整理一下，也算是一種學(xué)習(xí)的反芻。

本篇文章的Vue源碼版本為v2.2.0開發(fā)版。

Vue源碼的整體架構(gòu)無非是初始化Vue對象，掛載數(shù)據(jù)data/props等，在不同的時期觸發(fā)不同的事件鉤子，如created() / mounted() / update()等，后面專門整理各個模塊的文章。這里先講雙向數(shù)據(jù)綁定的部分，也是最主要的部分。

設(shè)計思想：觀察者模式

Vue的雙向數(shù)據(jù)綁定的設(shè)計思想為觀察者模式，為了方便，下文中將被觀察的對象稱為觀察者，將觀察者對象觸發(fā)更新的稱為訂閱者。主要涉及到的概念有：

1、Dep對象：Dependency依賴的簡寫，包含有三個主要屬性id, subs, target和四個主要函數(shù)addSub, removeSub, depend, notify，是觀察者的依賴集合，負(fù)責(zé)在數(shù)據(jù)發(fā)生改變時，使用notify()觸發(fā)保存在subs下的訂閱列表，依次更新數(shù)據(jù)和DOM。

• id: 每個觀察者(依賴對象)的唯一標(biāo)識。
• subs: 觀察者對象的訂閱者列表。
• target: 全局唯一的訂閱者對象，因為只能同時計算和更新一個訂閱者的值。
• addSub(): 使用`push()`方法添加一個訂閱者。
• removeSub(): 使用`splice()`方法移除一個訂閱者。
• depend(): 將自己添加到當(dāng)前訂閱者對象的依賴列表。
• notify(): 在數(shù)據(jù)被更新時，會遍歷subs對象，觸發(fā)每一個訂閱者的更新。

2、Observer對象：即觀察者，包含兩個主要屬性value, dep。做法是使用getter/setter方法覆蓋默認(rèn)的取值和賦值操作，將對象封裝為響應(yīng)式對象，每一次調(diào)用時更新依賴列表，更新值時觸發(fā)訂閱者。綁定在對象的__ob__原型鏈屬性上。

• value: 原始值。
• dep: 依賴列表。

源碼實戰(zhàn)解析

有過Vue開發(fā)基礎(chǔ)的應(yīng)該都了解其怎么初始化一個Vue對象：

new Vue({
 el: '#container',
 data: {
  count: 100
 },
 ...
});

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

本文名稱：通過源碼分析Vue的雙向數(shù)據(jù)綁定詳解-創(chuàng)新互聯(lián)
本文URL：http://sd-ha.com/article32/iphpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、品牌網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、ChatGPT、電子商務(wù)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(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)