手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

【Vue原理】Watch - 白話版

2019-7-10    seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

【Vue原理】Watch - 白話版
簡(jiǎn)述 響應(yīng)式
監(jiān)聽(tīng)的數(shù)據(jù)改變的時(shí),watch 如何工作
設(shè)置 immediate 時(shí),watch 如何工作
設(shè)置了 deep 時(shí), watch 如何工作
舉栗子
結(jié)論
沒(méi)有設(shè)置 deep
設(shè)置了 deep
實(shí)際證明
專(zhuān)注 Vue 源碼分享,為了方便大家理解,分為了白話版和 源碼版,白話版可以輕松理解工作原理和設(shè)計(jì)思想,源碼版可以更清楚內(nèi)部操作和 Vue的美,喜歡我就關(guān)注我的公眾號(hào),公眾號(hào)的文章,排版更好看

如果你覺(jué)得排版難看,請(qǐng)點(diǎ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ā),然后收集到讀取他的東西,保存到依賴(lài)收集器

當(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è)依賴(lài)收集器

首先,再次說(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)
藍(lán)藍(lán)設(shè)計(jì)www.88yangsc.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

分享本文至:

日歷

鏈接

個(gè)人資料

存檔