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