源碼解析 —— Vue的響應(yīng)式數(shù)據(jù)流

LuDongWei 發(fā)布于2019-08-20 12:32 / 2162人閱讀

摘要：下面我們會(huì)向大家解釋清楚為什么這個(gè)這么重要，以及它和的響應(yīng)式數(shù)據(jù)流有什么關(guān)系。源碼前面鋪墊這么多就是希望大家能理解接下來要講的響應(yīng)式數(shù)據(jù)流?？偨Y(jié)講到這里大家應(yīng)該都能夠明白的響應(yīng)式數(shù)據(jù)流是如何實(shí)現(xiàn)的。

Vue、React介紹

目前前端社區(qū)比較推崇的框架有Vue 和 React，公司內(nèi)部許多端都自發(fā)的將原有的老技術(shù)方案（widget + jQuery）遷移到 Vue / React上了。
我覺得Vue / React 有以下幾點(diǎn)優(yōu)勢

首先它們都有完整的組件化方案

virtual Dom （前端性能提升利器）

成熟的社區(qū)生態(tài)

介紹一個(gè)Vue例子

上面的例子我們初始化了一個(gè)vue組件，當(dāng)我們改變這個(gè)組件的狀態(tài)時(shí)，頁面的內(nèi)容也會(huì)隨之改變，這中間并不需要我們手動(dòng)的去操作頁面上的dom元素。

同時(shí)我們注意到Vue提供了一個(gè)語法糖 ——watch，這個(gè)就是我們今天要講的 Vue響應(yīng)式數(shù)據(jù)流的主角！代碼很簡單，就是組件的狀態(tài) name 改變的時(shí)候我們輸出一句話 “name change”。
下面我們會(huì)向大家解釋清楚為什么這個(gè) watch 這么重要，以及它和 Vue的響應(yīng)式數(shù)據(jù)流有什么關(guān)系。

Vue的響應(yīng)式數(shù)據(jù)流的優(yōu)勢在哪？

Vue 和 React 都是前端的組件化框架，功能上大同小異，本質(zhì)上就是借助virtual Dom幫助開發(fā)者管理混亂的Dom，并提供給開發(fā)者像操作狀態(tài)機(jī)一樣操作頁面的能力。

但是Vue的virtual Dom 不是普通的 virtual Dom

Vue 2.0 的實(shí)現(xiàn)有與眾不同的地方。和 Vue 的響應(yīng)式系統(tǒng)結(jié)合在一起之后，它可以讓你不必做任何事就獲得完全優(yōu)化的重渲染。由于每個(gè)組件都會(huì)在渲染時(shí)追蹤其響應(yīng)依賴，所以系統(tǒng)精確地知道應(yīng)該何時(shí)重渲染、應(yīng)該重渲染哪些組件。不需要 shouldComponentUpdate，也不需要 immutable 數(shù)據(jù) - it just works . —— 尤雨溪

我們看一下第三方的性能分析：

除了性能，最大的優(yōu)勢是減輕了開發(fā)者的負(fù)擔(dān)，開發(fā)者大多數(shù)情況下不需要依賴 shouldComponentUpdate，也不需要依賴 immutable 數(shù)據(jù)去判斷組件是否需要重新渲染，Vue會(huì)幫你做好這件事。

舉個(gè)例子來說明這兩個(gè)的virtual dom的不同之處：

開發(fā)者就像一個(gè)老師，Vue和React這兩個(gè)學(xué)生要做的事就是根據(jù)老師給出的長寬畫出對(duì)應(yīng)的長方形。每當(dāng)老師改變給出的長和寬時(shí)，Vue能夠自己發(fā)現(xiàn)長和寬變沒變，需不需要重新畫；React則需要老師告訴它長和寬變了，需要重新畫了。

預(yù)備知識(shí)：Object.defineProperty 與訂閱發(fā)布設(shè)計(jì)模式 Object.defineProperty

JavaScript 提供一個(gè)非常強(qiáng)大的方法 Object.defineProperty，它可以定義當(dāng)某一個(gè)值訪問和賦值時(shí)會(huì)先執(zhí)行自定義的鉤子方法。

一個(gè)簡單的Object.defineProperty例子

var obj = {};
var initValue = "hello";
Object.defineProperty(obj,"newKey",{
    get:function (){
        //當(dāng)獲取值的時(shí)候觸發(fā)的函數(shù)
        return initValue;    
    },
    set:function (value){
        //當(dāng)設(shè)置值的時(shí)候觸發(fā)的函數(shù),設(shè)置的新值通過參數(shù)value拿到
        console.log(value)
        initValue = value;
    }
});
//獲取值
console.log( obj.newKey );  //hello
//設(shè)置值
obj.newKey = "change value"; //change value

這個(gè)方法給予JavaScript開發(fā)一種面向切面編程的能力，使用該方法我們能夠隱式、自然的控制屬性的訪問和賦值。

訂閱發(fā)布設(shè)計(jì)模式

訂閱發(fā)布是一個(gè)非常常見的設(shè)計(jì)模式，原理也非常簡單就是訂閱者訂閱信息，然后發(fā)布者發(fā)布信息通知訂閱者更新。

Vue 源碼

前面鋪墊這么多就是希望大家能理解接下來要講的響應(yīng)式數(shù)據(jù)流。

Vue的初始化

如上圖，Vue的初始化會(huì)執(zhí)行一系列的方法，這里我們主要介紹Vue的initState 方法。
prop和data都是組件的屬性，prop通常上是父組件傳遞下來的，data是組件自身定義的，Vue不推薦你去改組件傳遞下來的prop，因?yàn)槟菢訒?huì)帶來不必要的復(fù)雜度。

Observer

Prop和data 的最終歸宿都是遞歸執(zhí)行 defineReactive方法。

那defineReactive方法做了什么呢？

defineReactive會(huì)用 Object.defineProperty將組件的每個(gè)屬性都包裝一下，這樣誰訪問了這些屬性，誰重新賦值了這些屬性我們都能追蹤到了。
Vue里面有一個(gè) Observe類，所有的prop子屬性和data本身都會(huì)帶有一個(gè)Observer對(duì)象，Observer的構(gòu)造函數(shù)

在控制臺(tái)我們可以看到每個(gè)屬性下都有__ob__，這說明這個(gè)屬性已經(jīng)被包裝成 Observer對(duì)象了，所以的訪問和賦值都能給追蹤到，這里面也保存著所有訂閱該Observer的訂閱者Watcher。

Watcher

我們看一下Watcher的構(gòu)造函數(shù)

Watcher支持 watch 一個(gè)表達(dá)式或者是一個(gè)方法。Watcher在構(gòu)造的時(shí)候會(huì)先獲取一次expOrFn的值，下面我們把expOrFn稱為Watcher的Getter。

Dep

還有一個(gè)關(guān)鍵的類是Dep，這個(gè)類會(huì)幫助我們的屬性記錄下所有的Watcher，每個(gè)屬性都有自己的Dep實(shí)例，同時(shí)Vue的Watcher訪問的屬性的時(shí)候 Dep會(huì)作為一個(gè)全局變量將自身的target屬性指向訪問的Wathcer。會(huì)執(zhí)行下面的方法

同時(shí)我們?cè)倩貋砜?defineReactive這個(gè)重要的方法

當(dāng)Watcher訪問組件的屬性時(shí)，通過Dep.target，Vue可以知道是Watcher訪問的，這樣當(dāng)Vue自己的Watcher訪問屬性的時(shí)候會(huì)被記錄成訂閱者，而我們?cè)L問的時(shí)候Vue不會(huì)執(zhí)行多余的代碼。這是一個(gè)很精妙的設(shè)計(jì)，將Object.defineProperty 與訂閱發(fā)布設(shè)計(jì)模式結(jié)合起來了。
看一下整個(gè)的流程圖

Vue的render函數(shù)就是 Watcher 的 expOrFn

理解了以上Vue是如何將Object.defineProperty 與訂閱發(fā)布設(shè)計(jì)模式結(jié)合起來的，然后我們?cè)倥e一反三：Vue的render函數(shù)如果就是 Watcher 的 expOrFn會(huì)怎么樣？
回到Vue的源碼里：

這里的 vm._render就是 render函數(shù)的一個(gè)封裝，我們可以看到本質(zhì)上：Vue的render函數(shù)就是 Watcher 的 expOrFn。那初始化的時(shí)候我們會(huì)先執(zhí)行一邊 render函數(shù)，在執(zhí)行render函數(shù)的過程中訪問了哪些組件的屬性，Vue都會(huì)用上面的提到的方法幫我們把依賴記錄下來。所以當(dāng)這個(gè)屬性變化的時(shí)候，自然而然，就像文章開頭的watch一樣，我們會(huì)重新render一次，（開頭的例子是輸出“name change”）。

總結(jié)

講到這里大家應(yīng)該都能夠明白Vue的響應(yīng)式數(shù)據(jù)流是如何實(shí)現(xiàn)的。同時(shí)我們能夠發(fā)現(xiàn)Vue提供給我們的許多語法糖都是同樣的道理，比如Vue的computer就是將computer函數(shù)作為Watcher的expOrFn。
希望大家在理解Vue響應(yīng)式數(shù)據(jù)流的基礎(chǔ)上能夠更加自信、靈活和穩(wěn)健的使用這個(gè)優(yōu)秀的框架。

GPU云服務(wù)器云服務(wù)器 asp響應(yīng)式源碼響應(yīng)式響應(yīng)式布局響應(yīng)式網(wǎng)站

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81040.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

LuDongWei

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#11.11大促#raksmart，獨(dú)服低至$30/月，洛杉磯/硅谷/中國香港/日本獨(dú)服/韓國，可選

閱讀 3237·2021-11-02 14:44
深藏功與名，利用Python修改前女友婚禮現(xiàn)場WIFI，轉(zhuǎn)身瀟灑離去！

閱讀 3737·2021-09-02 15:41
CSS實(shí)現(xiàn)反方向圓角

閱讀 1679·2019-08-29 16:57
原型與原型鏈

閱讀 1799·2019-08-26 13:38
使用express來代理服務(wù)

閱讀 3308·2019-08-23 18:13
Ajax

閱讀 2119·2019-08-23 15:41
js數(shù)據(jù)結(jié)構(gòu)-鏈表

閱讀 1681·2019-08-23 14:24
Vue學(xué)習(xí)筆記（未完待續(xù)）

閱讀 3039·2019-08-23 14:03

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

源碼解析 —— Vue的響應(yīng)式數(shù)據(jù)流

相關(guān)文章

vue源碼解析系列－compute實(shí)現(xiàn)機(jī)制

**【Vue原理】Props - 源碼版**

Vue源碼詳細(xì)解析:transclude,compile,link,依賴,批處理...一網(wǎng)打盡，全解

**【Vue原理】Props - 白話版**

**【Vue原理】依賴收集 - 源碼版之基本數(shù)據(jù)類型**

發(fā)表評(píng)論

0條評(píng)論

LuDongWei

男|高級(jí)講師

TA的文章

#11.11大促#raksmart，獨(dú)服低至$30/月，洛杉磯/硅谷/中國香港/日本獨(dú)服/韓國，可選

深藏功與名，利用Python修改前女友婚禮現(xiàn)場WIFI，轉(zhuǎn)身瀟灑離去！

CSS實(shí)現(xiàn)反方向圓角

原型與原型鏈

使用express來代理服務(wù)

Ajax

js數(shù)據(jù)結(jié)構(gòu)-鏈表

Vue學(xué)習(xí)筆記（未完待續(xù)）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

源碼解析 —— Vue的響應(yīng)式數(shù)據(jù)流

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！