資訊專欄INFORMATION COLUMN
摘要：所以我今后打算把每一個內容分成白話版和源碼版。有什么錯誤的地方，感謝大家能夠指出響應式系統我們都知道，只要在實例中聲明過的數據，那么這個數據就是響應式的。什么是響應式，也即是說，數據發生改變的時候，視圖會重新渲染，匹配更新為最新的值。
寫文章不容易，點個贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧
研究基于 Vue版本 【2.5.17】
如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧
【Vue原理】響應式原理 - 白話版
本文打算 白話文的形式講解 Vue 的響應式系統原理，盡量不涉及源碼。
只闡述工作流程，不想內容過多過于繁雜，導致大家會沒有什么閱讀的興趣。
所以我今后打算把每一個內容分成 白話版和 源碼版。
白話版，就是讓大家不用花費太多腦力，不用消耗太多時間，就能輕松地看完并大致了解內容。
有時間精力的人可以閱讀源碼版 ，然后自己參考源碼，來進行研究學習。有什么錯誤的地方，感謝大家能夠指出
響應式系統我們都知道，只要在 Vue 實例中聲明過的數據，那么這個數據就是響應式的。
什么是響應式，也即是說，數據發生改變的時候，視圖會重新渲染，匹配更新為最新的值。
也正是因為這個系統，讓我們可以脫離界面的束縛，只需要操作數據。
我們可以問出下面三個問題
1、Vue 是怎么知道數據改變？
2、Vue 在數據改變時，怎么知道通知哪些視圖更新？
3、Vue 在數據改變時，視圖怎么知道什么時候更新？
現在，我將會講解三個重要的概念
Object.defineProperty，依賴收集，依賴更新
Object.defineProperty這個方法，是 Vue 響應式系統的精髓，骨髓，腦髓
使用 Object.defineProperty 可以為對象中的每一個屬性，設置 get 和 set 方法
Object.defineProperty 可以為屬性設置很多特性，例如 configurable，enumerable，但是現在不過多解釋，重點只放在 get 和 set
那么 get 和 set 方法有什么用？
get 值是一個函數，當屬性被訪問時，會觸發 get 函數
set 值同樣是一個函數，當屬性被賦值時，會觸發 set 函數
舉個例子
var obj={
name:"神仙朱"
}
Object.defineProperty(obj,"name",{
get(){
console.log("get 被觸發")
},
set(val){
console.log("set 被觸發")
}
})
當我訪問 obj.name 時，會打印 " get 被觸發 "
當我為 obj.name 賦值時，obj.name = 5，會打印 " set 被觸發 "
這便可以回答了我開篇的第一個問題
Vue 是怎么知道數據改變的呢？
恩，Vue 在 屬性的 set 方法中做了手腳，因而當數據改變時，觸發 屬性的 set 方法，Vue 就能知道數據有改變
依賴收集簡單地說
data 中的聲明的每個屬性，都擁有一個數組，保存著 誰依賴（使用）了 它
舉個例子
new Vue({
data(){
return {
name:"神仙朱"
}
}
})
然后 頁面A 引用了name
{{name}}
此時，name 把 頁面 A 存在它的后宮中（這個頁面依賴我）
為什么呢？
因為它知道誰依賴它之后，它就可以在發生改變的時候，通知 依賴它的頁面，從而讓頁面完成更新
TIP
實際上，會依賴 name 的地方，不只是頁面，還會有 computed，watch.... 等等，但是這里我們全部使用頁面一詞替代
這就是依賴收集，把 依賴了我（使用了我的東西），統統保存起來。
可是，保存在哪里，具體保存的是什么東西，我們這里暫時不深入，因為這是白話文。
我按上面的例子，從Vue 內部打印一份數據供大家簡單了解即可
可以看到，name 屬性，使用了 一個 dep 保存了 頁面A 這個依賴，而保存的實際上是 頁面A的 Watcher。
TIP
簡單說一下，watcher 是什么，每個 Vue 實例都會擁有一個專屬的 watcher，可用于實例更新
總結一下
1、data 中每個聲明的屬性，都會有一個 專屬的依賴收集器 subs
2、當頁面使用到 某個屬性時，頁面的 watcher 就會被 放到 依賴收集器 subs 中
數據 是在什么時候進行 收集依賴 的呢？
答案是，ObjectdefineProperty - get
當 頁面 A 讀取了 name 時，會觸發 name 的 get 函數，此時，name 就會保存 頁面A 的 watcher 啦！
這便可以回答了我開篇的第二個問題
Vue 在數據改變時，怎么知道通知哪些視圖更新？
恩，通知那些存在 依賴收集器中的 視圖
依賴更新依賴更新，就是，通知所有的依賴進行更新
經過上面的講解，我們都知道，每個屬性都會保存有一個 依賴收集器 subs
而這個 依賴收集器，是用來在 數據變化時，通知更新的
數據 是在 什么時候進行 依賴更新 的呢？
答案是，Object.defineProperty - set
以上面的 Vue 實例 為例
當 name 改變的時候，name 會遍歷自己的 依賴收集器 subs，逐個通知 watcher，讓 watcher 完成更新
這里 name 會通知 頁面A，頁面A 重新讀取新的 name ，然后完成渲染
這便可以回答了我開篇的第二個問題
Vue 在數據改變時，視圖怎么知道什么時候更新?
恩，在數據變化觸發 set 函數時，通知視圖，視圖開始更新
簡單總結
1、Object.defineProperty - get ，用于 依賴收集
2、Object.defineProperty - set，用于 依賴更新
3、每個 data 聲明的屬性，都擁有一個的專屬依賴收集器 subs
4、依賴收集器 subs 保存的依賴是 watcher
5、watcher 可用于 進行視圖更新
最后如果發現有錯誤，說得不對的地方，非常感謝能夠指出，本人會有重謝哈哈哈，非常歡迎一起探討學習
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105085.html
摘要：如果沒有緩存，我們將不可避免的多次執行的現在我們要開始講解，是如何判斷是否使用緩存的首先計算后，會把計算得到的值保存到一個變量中。當使用緩存時，就直接返回這個變量。 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或...
寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧 【Vue原理】Props - 源碼版 今天記錄 Props 源碼流程，哎，這東西，就算是研究過了，也真是會隨著時間慢慢忘記的。 幸好我做...
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧如果你覺得排版難看，請點擊下面公眾號 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基...
摘要：而是在初始化時，在讀取了監聽的數據的值之后，便立即調用一遍你設置的監聽回調，然后傳入剛讀取的值設置了時，如何工作我們都知道有一個選項，是用來深度監聽的。 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下...
摘要：通常會做很多判斷來選擇存在的類型，比如判斷等是否存在，而選擇他為微任務類型但是可能宏微任務最后都是，因為他是保守兼容處理。 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧 【V...
閱讀 2233·2021-09-23 11:52
閱讀 1899·2021-09-02 15:41
閱讀 3018·2019-08-30 10:47
閱讀 1984·2019-08-29 17:14
閱讀 2334·2019-08-29 16:16
閱讀 3192·2019-08-28 18:29
閱讀 3418·2019-08-26 13:30
閱讀 2610·2019-08-26 10:49
