2019-7-10 seo達人
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
【Vue原理】Watch - 白話版
簡述 響應式
監(jiān)聽的數(shù)據(jù)改變的時，watch 如何工作
設(shè)置 immediate 時，watch 如何工作
設(shè)置了 deep 時， watch 如何工作
舉栗子
結(jié)論
沒有設(shè)置 deep
設(shè)置了 deep
實際證明
專注 Vue 源碼分享，為了方便大家理解，分為了白話版和 源碼版，白話版可以輕松理解工作原理和設(shè)計思想，源碼版可以更清楚內(nèi)部操作和 Vue的美，喜歡我就關(guān)注我的公眾號，公眾號的文章，排版更好看
如果你覺得排版難看，請點擊下面公眾號鏈接
【Vue原理】Watch - 白話版
今天我們用白話文解讀 watch 的工作原理，輕松快速理解 watch 內(nèi)部工作原理。你說，你只懂怎么用的，卻不懂他內(nèi)部是怎么工作的，這樣能有什么用？
近期有篇 《停止學習框架》很火，其實本意不是讓我們不要學框架，而是讓我們不要只停留在框架表面，我們要學會深入，以一敵十，讓我們也要學會框架的抽象能力
watch 想必大家用得應該也挺多的，用得也很順，如果你順便花一點點時間了解一下內(nèi)部的工作原理，相信肯定會對你的工作有事半功倍的效果
watch 的工作原理其實挺簡單的，如果你有看過我之前講解其他選項的文章，你可以一下子就明白 watch 是如何工作的，所以這邊文章我也?得很快
根據(jù) watch 的 api，我們需要了解三個地方
1、監(jiān)聽的數(shù)據(jù)改變的時，watch 如何工作
2、設(shè)置 immediate 時，watch 如何工作
3、設(shè)置了 deep 時，watch 如何工作
簡述 響應式
Vue 會把數(shù)據(jù)設(shè)置響應式，既是設(shè)置他的 get 和 set
當 數(shù)據(jù)被讀取，get 被觸發(fā)，然后收集到讀取他的東西，保存到依賴收集器
當 數(shù)據(jù)被改變，set 被觸發(fā)，然后通知曾經(jīng)讀取他的東西進行更新
如果你不了解，可以查看下 以前的文章
【Vue原理】響應式原理 - 白話版
監(jiān)聽的數(shù)據(jù)改變的時，watch 如何工作
watch 在一開始初始化的時候，會 讀取 一遍 監(jiān)聽的數(shù)據(jù)的值，于是，此時 那個數(shù)據(jù)就收集到 watch 的 watcher 了
然后 你給 watch 設(shè)置的 handler ，watch 會放入 watcher 的更新函數(shù)中
當 數(shù)據(jù)改變時，通知 watch 的 watcher 進行更新，于是 你設(shè)置的 handler 就被調(diào)用了
設(shè)置 immediate 時，watch 如何工作
當你設(shè)置了 immediate 時，就不需要在 數(shù)據(jù)改變的時候 才會觸發(fā)。
而是在 初始化 watch 時，在讀取了 監(jiān)聽的數(shù)據(jù)的值 之后，便立即調(diào)用一遍你設(shè)置的監(jiān)聽回調(diào)，然后傳入剛讀取的值
設(shè)置了 deep 時， watch 如何工作
我們都知道 watch 有一個 deep 選項，是用來深度監(jiān)聽的。什么是深度監(jiān)聽呢？就是當你監(jiān)聽的屬性的值是一個對象的時候，如果你沒有設(shè)置深度監(jiān)聽，當對象內(nèi)部變化時，你監(jiān)聽的回調(diào)是不會被觸發(fā)的
在說明這個之前，請大家先了解一下
當你使用 Object.defineProperty 給 【值是對象的屬性】 設(shè)置 set 和 get 的時候
1如果你直接改變或讀取這個屬性 ( 直接賦值 )，可以觸發(fā)這個屬性的設(shè)置的 set 和 get
2但是你改變或讀取它內(nèi)部的屬性，get 和 set 不會被觸發(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ā)")
}
})
// 訪問 test.name 第一次，觸發(fā) name 的 get
Object.defineProperty(test.name,"first",{
get(){
return console.log("first get被觸發(fā)")
},
set(){
console.log("first set被觸發(fā)")
}
})
// 訪問 test.name 第二次，觸發(fā) name 的 get
var a = test.name
// 獨立訪問 first 第一次
var b= a.first
// 獨立訪問 first 第二次
b= a.first
// 獨立改變 first
a.first = 5
能看到除了有兩次需要訪問到 name，必不可少會觸發(fā)到 name 的 get
之后，當我們獨立訪問 name 內(nèi)部的 first 的時，只會觸發(fā) first 的 get 函數(shù)，而 name 設(shè)置的 get 并不會被觸發(fā)
結(jié)論
看上面的例子后，所以當你的 data 屬性值是對象，比如下面的 info
data(){
return {
info:{ name:1 }
}
}
此時，Vue在設(shè)置響應式數(shù)據(jù)的時候， 遇到值是對象的，會遞歸遍歷，把對象內(nèi)所有的屬性都設(shè)置為響應式，就是每個屬性都設(shè)置 get 和 set，于是每個屬性都有自己的一個依賴收集器
首先，再次說明，watch初始化的時候，會先讀取一遍監(jiān)聽數(shù)據(jù)的值
沒有設(shè)置 deep
1、因為讀取了監(jiān)聽的 data 的屬性，watch 的 watcher 被收集在 這個屬性的 收集器中
設(shè)置了 deep
1、因為讀取了監(jiān)聽的data 的屬性，watch 的 watcher 被收集在 這個屬性的 收集器中
2、在讀取 data 屬性的時候，發(fā)現(xiàn)設(shè)置了 deep 而且值是一個對象，會遞歸遍歷這個值，把內(nèi)部所有屬性逐個讀取一遍，于是 屬性和 它的對象值內(nèi)每一個屬性 都會收集到 watch 的 watcher
于是，無論對象嵌套多深的屬性，只要改變了，會通知 相應的 watch 的 watcher 去更新，于是 你設(shè)置的 watch 回調(diào)就被觸發(fā)了
實際證明
證明 watch 的 watcher 深度監(jiān)聽時是否被內(nèi)部每個屬性都收集
我在 Vue 內(nèi)部給 watch 的 watcher 加了一個 屬性，標識他是 watch 的 watcher，并且去掉了多余的屬性，為了截圖短一點
藍藍設(shè)計( www.lapeinture.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務。
藍藍設(shè)計的小編 http://www.lapeinture.cn