資訊專欄INFORMATION COLUMN
摘要：而是在初始化時，在讀取了監聽的數據的值之后，便立即調用一遍你設置的監聽回調，然后傳入剛讀取的值設置了時，如何工作我們都知道有一個選項，是用來深度監聽的。
寫文章不容易，點個贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧
研究基于 Vue版本 【2.5.17】
如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧
【Vue原理】Watch - 白話版
今天我們用白話文解讀 watch 的工作原理，輕松快速理解 watch 內部工作原理。你說，你只懂怎么用的，卻不懂他內部是怎么工作的，這樣能有什么用？
近期有篇 《停止學習框架》很火，其實本意不是讓我們不要學框架，而是讓我們不要只停留在框架表面，我們要學會深入，以一敵十，讓我們也要學會框架的抽象能力
watch 想必大家用得應該也挺多的，用得也很順，如果你順便花一點點時間了解一下內部的工作原理，相信肯定會對你的工作有事半功倍的效果
watch 的工作原理其實挺簡單的，如果你有看過我之前講解其他選項的文章，你可以一下子就明白 watch 是如何工作的，所以這邊文章我也?得很快
根據 watch 的 api，我們需要了解三個地方
1、監聽的數據改變的時，watch 如何工作
2、設置 immediate 時，watch 如何工作
3、設置了 deep 時，watch 如何工作
Vue 會把數據設置響應式，既是設置他的 get 和 set
當 數據被讀取，get 被觸發，然后收集到讀取他的東西，保存到依賴收集器
當 數據被改變，set 被觸發，然后通知曾經讀取他的東西進行更新
如果你不了解，可以查看下 以前的文章
【Vue原理】響應式原理 - 白話版
watch 在一開始初始化的時候，會 讀取 一遍 監聽的數據的值，于是，此時 那個數據就收集到 watch 的 watcher 了
然后 你給 watch 設置的 handler ，watch 會放入 watcher 的更新函數中
當 數據改變時，通知 watch 的 watcher 進行更新，于是 你設置的 handler 就被調用了
當你設置了 immediate 時，就不需要在 數據改變的時候 才會觸發。
而是在 初始化 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初始化的時候，會先讀取一遍監聽數據的值
1、因為讀取了監聽的 data 的屬性，watch 的 watcher 被收集在 這個屬性的 收集器中
1、因為讀取了監聽的data 的屬性，watch 的 watcher 被收集在 這個屬性的 收集器中
2、在讀取 data 屬性的時候，發現設置了 deep 而且值是一個對象，會遞歸遍歷這個值，把內部所有屬性逐個讀取一遍，于是 屬性和 它的對象值內每一個屬性 都會收集到 watch 的 watcher
于是，無論對象嵌套多深的屬性，只要改變了，會通知 相應的 watch 的 watcher 去更新，于是 你設置的 watch 回調就被觸發了
證明 watch 的 watcher 深度監聽時是否被內部每個屬性都收集
我在 Vue 內部給 watch 的 watcher 加了一個 屬性，標識他是 watch 的 watcher，并且去掉了多余的屬性，為了截圖短一點
于是我們能看到，parentName 以及 parentName 內部的屬性 a 都收集了 watch 的 watcher，以此類推，就算嵌套再深，設置深度監聽就可以觸發監聽回調了，坐實了坐實了
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105198.html
摘要：而我覺得現在出一個白話版，是讓大家有興趣去研究源碼的時候，可以提前理清一下思路。相當于封裝，提取公共部分。顯然，今天我不是來教大家怎么用的，怎么用看文檔就好了，我是講解生命的真諦內部的工作原理。而這個不會合并，直接替換掉整個選項 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版...
寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧 【Vue原理】Mixins - 源碼版 今天探索的是 mixins 的源碼，mixins 根據不同的選項類型會做不同的處理 篇幅會有些長，...
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版今天繼續探索源碼，廢話不 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...
寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧 【Vue原理】Props - 源碼版 今天記錄 Props 源碼流程，哎，這東西，就算是研究過了，也真是會隨著時間慢慢忘記的。 幸好我做...
摘要：所以我今后打算把每一個內容分成白話版和源碼版。有什么錯誤的地方，感謝大家能夠指出響應式系統我們都知道，只要在實例中聲明過的數據，那么這個數據就是響應式的。什么是響應式，也即是說，數據發生改變的時候，視圖會重新渲染，匹配更新為最新的值。 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 V...
閱讀 1626·2021-09-02 09:55
閱讀 1092·2019-08-30 13:19
閱讀 1394·2019-08-26 13:51
閱讀 1445·2019-08-26 13:49
閱讀 2372·2019-08-26 12:13
閱讀 452·2019-08-26 11:52
閱讀 1899·2019-08-26 10:58
閱讀 3084·2019-08-26 10:19
