前言

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

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

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

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

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

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

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

• id: 每個(gè)觀察者(依賴(lài)對(duì)象)的唯一標(biāo)識(shí)。
• subs: 觀察者對(duì)象的訂閱者列表。
• target: 全局唯一的訂閱者對(duì)象，因?yàn)橹荒芡瑫r(shí)計(jì)算和更新一個(gè)訂閱者的值。
• addSub(): 使用`push()`方法添加一個(gè)訂閱者。
• removeSub(): 使用`splice()`方法移除一個(gè)訂閱者。
• depend(): 將自己添加到當(dāng)前訂閱者對(duì)象的依賴(lài)列表。
• notify(): 在數(shù)據(jù)被更新時(shí)，會(huì)遍歷subs對(duì)象，觸發(fā)每一個(gè)訂閱者的更新。

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

• value: 原始值。
• dep: 依賴(lài)列表。

源碼實(shí)戰(zhàn)解析

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

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

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

本文名稱(chēng)：通過(guò)源碼分析Vue的雙向數(shù)據(jù)綁定詳解-創(chuàng)新互聯(lián)
本文URL：http://www.chinadenli.net/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)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)