通過源碼分析Vue的雙向數(shù)據(jù)綁定詳解-創(chuàng)新互聯(lián)

前言

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

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

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

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

設計思想：觀察者模式

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

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

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

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

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

源碼實戰(zhàn)解析

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

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

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

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

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、品牌網(wǎng)站建設、網(wǎng)站維護、ChatGPT、電子商務、響應式網(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)

猜你還喜歡下面的內(nèi)容