【Vue原理】Watch - 白話版

hzx 發(fā)布于2019-08-23 18:25 / 1838人閱讀

摘要：而是在初始化時(shí)，在讀取了監(jiān)聽(tīng)的數(shù)據(jù)的值之后，便立即調(diào)用一遍你設(shè)置的監(jiān)聽(tīng)回調(diào)，然后傳入剛讀取的值設(shè)置了時(shí)，如何工作我們都知道有一個(gè)選項(xiàng)，是用來(lái)深度監(jiān)聽(tīng)的。

寫文章不容易，點(diǎn)個(gè)贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】

如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者拉到下面關(guān)注公眾號(hào)也可以吧

【Vue原理】Watch - 白話版

今天我們用白話文解讀 watch 的工作原理，輕松快速理解 watch 內(nèi)部工作原理。你說(shuō)，你只懂怎么用的，卻不懂他內(nèi)部是怎么工作的，這樣能有什么用？

近期有篇《停止學(xué)習(xí)框架》很火，其實(shí)本意不是讓我們不要學(xué)框架，而是讓我們不要只停留在框架表面，我們要學(xué)會(huì)深入，以一敵十，讓我們也要學(xué)會(huì)框架的抽象能力

watch 想必大家用得應(yīng)該也挺多的，用得也很順，如果你順便花一點(diǎn)點(diǎn)時(shí)間了解一下內(nèi)部的工作原理，相信肯定會(huì)對(duì)你的工作有事半功倍的效果

watch 的工作原理其實(shí)挺簡(jiǎn)單的，如果你有看過(guò)我之前講解其他選項(xiàng)的文章，你可以一下子就明白 watch 是如何工作的，所以這邊文章我也?得很快

根據(jù) watch 的 api，我們需要了解三個(gè)地方

1、監(jiān)聽(tīng)的數(shù)據(jù)改變的時(shí)，watch 如何工作

2、設(shè)置 immediate 時(shí)，watch 如何工作

3、設(shè)置了 deep 時(shí)，watch 如何工作

簡(jiǎn)述響應(yīng)式

Vue 會(huì)把數(shù)據(jù)設(shè)置響應(yīng)式，既是設(shè)置他的 get 和 set

當(dāng) 數(shù)據(jù)被讀取，get 被觸發(fā)，然后收集到讀取他的東西，保存到依賴收集器

當(dāng) 數(shù)據(jù)被改變，set 被觸發(fā)，然后通知曾經(jīng)讀取他的東西進(jìn)行更新

如果你不了解，可以查看下以前的文章

【Vue原理】響應(yīng)式原理 - 白話版

監(jiān)聽(tīng)的數(shù)據(jù)改變的時(shí)，watch 如何工作

watch 在一開(kāi)始初始化的時(shí)候，會(huì) 讀取一遍監(jiān)聽(tīng)的數(shù)據(jù)的值，于是，此時(shí) 那個(gè)數(shù)據(jù)就收集到 watch 的 watcher 了

然后你給 watch 設(shè)置的 handler ，watch 會(huì)放入 watcher 的更新函數(shù)中

當(dāng) 數(shù)據(jù)改變時(shí)，通知 watch 的 watcher 進(jìn)行更新，于是你設(shè)置的 handler 就被調(diào)用了

設(shè)置 immediate 時(shí)，watch 如何工作

當(dāng)你設(shè)置了 immediate 時(shí)，就不需要在數(shù)據(jù)改變的時(shí)候才會(huì)觸發(fā)。

而是在初始化 watch 時(shí)，在讀取了監(jiān)聽(tīng)的數(shù)據(jù)的值之后，便立即調(diào)用一遍你設(shè)置的監(jiān)聽(tīng)回調(diào)，然后傳入剛讀取的值

設(shè)置了 deep 時(shí)， watch 如何工作

我們都知道 watch 有一個(gè) deep 選項(xiàng)，是用來(lái)深度監(jiān)聽(tīng)的。什么是深度監(jiān)聽(tīng)呢？就是當(dāng)你監(jiān)聽(tīng)的屬性的值是一個(gè)對(duì)象的時(shí)候，如果你沒(méi)有設(shè)置深度監(jiān)聽(tīng)，當(dāng)對(duì)象內(nèi)部變化時(shí)，你監(jiān)聽(tīng)的回調(diào)是不會(huì)被觸發(fā)的

在說(shuō)明這個(gè)之前，請(qǐng)大家先了解一下

當(dāng)你使用 Object.defineProperty 給【值是對(duì)象的屬性】設(shè)置 set 和 get 的時(shí)候

1如果你直接改變或讀取這個(gè)屬性 ( 直接賦值 )，可以觸發(fā)這個(gè)屬性的設(shè)置的 set 和 get

2但是你改變或讀取它內(nèi)部的屬性，get 和 set 不會(huì)被觸發(fā)的

舉栗子

var inner = { first:1111 }
var test={    name:inner  }

Object.defineProperty(test,"name",{
    get(){         
        console.log("name get被觸發(fā)")         
        return inner
    },
    set(){        
        console.log("name set被觸發(fā)")
    }
})

// 訪問(wèn) test.name 第一次，觸發(fā) name 的 get
Object.defineProperty(test.name,"first",{
    get(){        
        return console.log("first get被觸發(fā)")
    },
    set(){        
        console.log("first set被觸發(fā)")
    }
})

// 訪問(wèn) test.name 第二次，觸發(fā) name 的 get
var a = test.name
// 獨(dú)立訪問(wèn) first 第一次
var b= a.first 
// 獨(dú)立訪問(wèn) first 第二次
b= a.first
// 獨(dú)立改變 first
a.first = 5

能看到除了有兩次需要訪問(wèn)到 name，必不可少會(huì)觸發(fā)到 name 的 get

之后，當(dāng)我們獨(dú)立訪問(wèn) name 內(nèi)部的 first 的時(shí)，只會(huì)觸發(fā) first 的 get 函數(shù)，而 name 設(shè)置的 get 并不會(huì)被觸發(fā)

結(jié)論

看上面的例子后，所以當(dāng)你的 data 屬性值是對(duì)象，比如下面的 info

data(){    

    return {        

        info:{ name:1 }

    }

}

此時(shí)，Vue在設(shè)置響應(yīng)式數(shù)據(jù)的時(shí)候，遇到值是對(duì)象的，會(huì)遞歸遍歷，把對(duì)象內(nèi)所有的屬性都設(shè)置為響應(yīng)式，就是每個(gè)屬性都設(shè)置 get 和 set，于是每個(gè)屬性都有自己的一個(gè)依賴收集器

首先，再次說(shuō)明，watch初始化的時(shí)候，會(huì)先讀取一遍監(jiān)聽(tīng)數(shù)據(jù)的值

沒(méi)有設(shè)置 deep

1、因?yàn)樽x取了監(jiān)聽(tīng)的 data 的屬性，watch 的 watcher 被收集在這個(gè)屬性的收集器中

設(shè)置了 deep

1、因?yàn)樽x取了監(jiān)聽(tīng)的data 的屬性，watch 的 watcher 被收集在這個(gè)屬性的收集器中

2、在讀取 data 屬性的時(shí)候，發(fā)現(xiàn)設(shè)置了 deep 而且值是一個(gè)對(duì)象，會(huì)遞歸遍歷這個(gè)值，把內(nèi)部所有屬性逐個(gè)讀取一遍，于是屬性和它的對(duì)象值內(nèi)每一個(gè)屬性都會(huì)收集到 watch 的 watcher

于是，無(wú)論對(duì)象嵌套多深的屬性，只要改變了，會(huì)通知相應(yīng)的 watch 的 watcher 去更新，于是你設(shè)置的 watch 回調(diào)就被觸發(fā)了

實(shí)際證明

證明 watch 的 watcher 深度監(jiān)聽(tīng)時(shí)是否被內(nèi)部每個(gè)屬性都收集

我在 Vue 內(nèi)部給 watch 的 watcher 加了一個(gè) 屬性，標(biāo)識(shí)他是 watch 的 watcher，并且去掉了多余的屬性，為了截圖短一點(diǎn)

于是我們能看到，parentName 以及 parentName 內(nèi)部的屬性 a 都收集了 watch 的 watcher，以此類推，就算嵌套再深，設(shè)置深度監(jiān)聽(tīng)就可以觸發(fā)監(jiān)聽(tīng)回調(diào)了，坐實(shí)了坐實(shí)了

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

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

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

登陸后可評(píng)論

0條評(píng)論

hzx

男|高級(jí)講師

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

TA的文章

國(guó)內(nèi)Gravatar頭像的完美替代方案Cravatar

閱讀 1668·2021-09-02 09:55
行內(nèi)元素在設(shè)置float后，就可以設(shè)置width和height

閱讀 1151·2019-08-30 13:19
如何在Canvas中添加事件

閱讀 1421·2019-08-26 13:51
webpack中如何加載靜態(tài)文件

閱讀 1475·2019-08-26 13:49
electron跳坑指南 2(主進(jìn)程和渲染進(jìn)程)

閱讀 2420·2019-08-26 12:13
textarea文域高度自適應(yīng)

閱讀 480·2019-08-26 11:52
JS基礎(chǔ)07「函數(shù)」

閱讀 1932·2019-08-26 10:58
數(shù)據(jù)類型（概述）

閱讀 3110·2019-08-26 10:19

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

資訊專欄INFORMATION COLUMN

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

【Vue原理】Watch - 白話版

舉栗子

結(jié)論

沒(méi)有設(shè)置 deep

設(shè)置了 deep

實(shí)際證明

相關(guān)文章

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

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

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

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

**【Vue原理】響應(yīng)式原理 - 白話版**

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

0條評(píng)論

hzx

男|高級(jí)講師

TA的文章

國(guó)內(nèi)Gravatar頭像的完美替代方案Cravatar

行內(nèi)元素在設(shè)置float后，就可以設(shè)置width和height

如何在Canvas中添加事件

webpack中如何加載靜態(tài)文件

electron跳坑指南 2(主進(jìn)程和渲染進(jìn)程)

textarea文域高度自適應(yīng)

JS基礎(chǔ)07「函數(shù)」

數(shù)據(jù)類型（概述）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

【Vue原理】Watch - 白話版

舉栗子

結(jié)論

沒(méi)有設(shè)置 deep

設(shè)置了 deep

實(shí)際證明

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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