【Vue原理】Watch - 白話版

寫文章不容易，點個讚唄兄弟 專一 Vue 源碼分享，文章分爲白話版和 源碼版，白話版助於理解工做原理，源碼版助於瞭解內部詳情，讓咱們一塊兒學習吧 研究基於 Vue版本 【2.5.17】

若是你以爲排版難看，請點擊 下面連接 或者 拉到 下面關注公衆號也能夠吧

【Vue原理】Watch - 白話版

今天咱們用白話文解讀 watch 的工做原理，輕鬆快速理解 watch 內部工做原理。你說，你只懂怎麼用的，卻不懂他內部是怎麼工做的，這樣能有什麼用？

近期有篇 《中止學習框架》很火，其實本意不是讓咱們不要學框架，而是讓咱們不要只停留在框架表面，咱們要學會深刻，以一敵十，讓咱們也要學會框架的抽象能力

watch 想必你們用得應該也挺多的，用得也很順，若是你順便花一點點時間瞭解一下內部的工做原理，相信確定會對你的工做有事半功倍的效果

watch 的工做原理其實挺簡單的，若是你有看過我以前講解其餘選項的文章，你能夠一會兒就明白 watch 是如何工做的，因此這邊文章我也✍得很快

根據 watch 的 api，咱們須要瞭解三個地方

一、監聽的數據改變的時，watch 如何工做

二、設置 immediate 時，watch 如何工做

三、設置了 deep 時，watch 如何工做

簡述 響應式

Vue 會把數據設置響應式，既是設置他的 get 和 set

當 數據被讀取，get 被觸發，而後收集到讀取他的東西，保存到依賴收集器

當 數據被改變，set 被觸發，而後通知曾經讀取他的東西進行更新

若是你不瞭解，能夠查看下 之前的文章

【Vue原理】響應式原理 - 白話版

監聽的數據改變的時，watch 如何工做

watch 在一開始初始化的時候，會 讀取 一遍 監聽的數據的值，因而，此時 那個數據就收集到 watch 的 watcher 了

而後 你給 watch 設置的 handler ，watch 會放入 watcher 的更新函數中

當 數據改變時，通知 watch 的 watcher 進行更新，因而 你設置的 handler 就被調用了

設置 immediate 時，watch 如何工做

當你設置了 immediate 時，就不須要在 數據改變的時候 纔會觸發。

而是在 初始化 watch 時，在讀取了 監聽的數據的值 以後，便當即調用一遍你設置的監聽回調，而後傳入剛讀取的值

設置了 deep 時， watch 如何工做

咱們都知道 watch 有一個 deep 選項，是用來深度監聽的。什麼是深度監聽呢？就是當你監聽的屬性的值是一個對象的時候，若是你沒有設置深度監聽，當對象內部變化時，你監聽的回調是不會被觸發的

在說明這個以前，請你們先了解一下

當你使用 Object.defineProperty 給 【值是對象的屬性】 設置 set 和 get 的時候

1若是你直接改變或讀取這個屬性 ( 直接賦值 )，能夠觸發這個屬性的設置的 set 和 get

2可是你改變或讀取它內部的屬性，get 和 set 不會被觸發的

舉栗子

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

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

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

// 訪問 test.name 第二次，觸發 name 的 get
var a = test.name
// 獨立訪問 first 第一次
var b= a.first 
// 獨立訪問 first 第二次
b= a.first
// 獨立改變 first
a.first = 5
複製代碼

能看到除了有兩次須要訪問到 name，必不可少會觸發到 name 的 get

以後，當咱們獨立訪問 name 內部的 first 的時，只會觸發 first 的 get 函數，而 name 設置的 get 並不會被觸發

結論

看上面的例子後，因此當你的 data 屬性值是對象，好比下面的 info

data(){    

    return {        

        info:{ name:1 }

    }

}
複製代碼

此時，Vue在設置響應式數據的時候， 遇到值是對象的，會遞歸遍歷，把對象內全部的屬性都設置爲響應式，就是每一個屬性都設置 get 和 set，因而每一個屬性都有本身的一個依賴收集器

首先，再次說明，watch初始化的時候，會先讀取一遍監聽數據的值

沒有設置 deep

一、由於讀取了監聽的 data 的屬性，watch 的 watcher 被收集在 這個屬性的 收集器中

設置了 deep

一、由於讀取了監聽的data 的屬性，watch 的 watcher 被收集在 這個屬性的 收集器中

二、在讀取 data 屬性的時候，發現設置了 deep 並且值是一個對象，會遞歸遍歷這個值，把內部全部屬性逐個讀取一遍，因而 屬性和 它的對象值內每個屬性 都會收集到 watch 的 watcher

因而，不管對象嵌套多深的屬性，只要改變了，會通知 相應的 watch 的 watcher 去更新，因而 你設置的 watch 回調就被觸發了

實際證實

證實 watch 的 watcher 深度監聽時是否被內部每一個屬性都收集

我在 Vue 內部給 watch 的 watcher 加了一個 屬性，標識他是 watch 的 watcher，而且去掉了多餘的屬性，爲了截圖短一點

因而咱們能看到，parentName 以及 parentName 內部的屬性 a 都收集了 watch 的 watcher，以此類推，就算嵌套再深，設置深度監聽就能夠觸發監聽回調了，坐實了坐實了