資訊專欄INFORMATION COLUMN
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理依賴更新源碼版如果對依賴收集完
寫文章不容易，點個贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧
研究基于 Vue版本 【2.5.17】
如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧
【Vue原理】依賴更新 - 源碼版
如果對依賴收集完全沒有概念的同學，可以先看我這篇白話版
響應式原理 - 白話版
我們已經講過了 依賴收集
【Vue原理】依賴收集 - 源碼版之基本數據類型
【Vue原理】依賴收集 - 源碼版之引用數據類型
現在就要看依賴更新了哈哈哈，畢竟收集完是要更新的嘛
其實依賴更新挺簡單的，就是兩步
修改屬性值
通知保存的依賴進行更新
重點只需要看 Object.defineProperty 設置的set 函數，當給數據重賦新值的時候，自然會觸發 set 函數，完成依賴更新
function defineReactive(obj, key, val) {
var dep = new Dep();
var childOb = observe(val);
Object.defineProperty(obj, key, {
get(){
... 屬性被讀取，完成依賴收集
// 返回閉包值
return val
},
set(newVal) {
// 值沒有變化
if (newVal ===val) return
// 修改閉包值
val = newVal;
// 如果屬性已經存在過，設置新值的時候，會重新調用一遍
childOb = observe(newVal);
// 觸發更新
dep.notify();
}
});
}
依賴更新重點就重在 通知更新
而通知更新的重點，只有一句話，【dep.notify】
所以，我們重點去了解這句話，如何通知，如何更新
好的， dep 在第一篇講過了
【Vue原理】依賴收集 - 源碼版之基本數據類型
我們知道，dep 主要是存儲依賴的，再看一遍源碼
var Dep = function Dep() {
this.subs = []; // 依賴存儲器
};
// 遍歷 subs ，逐個通知依賴，就是逐個調用 watcher.update
Dep.prototype.notify = function() {
var subs = this.subs.slice();
for (var i = 0, l = subs.length; i < l; i++) {
subs[i].update();
}
};
看過了源碼，我們知道了，原來通知更新是【遍歷依賴存儲器】，然后一個個【調用 watcher.update】
因為 subs 裝的是 watcher，所以，subs[0].update 就是 watcher.update
于是問題又來了，watcher.update 是怎么就更新了？？？
function Watcher(vm, expOrFn) {
this.vm = vm;
// 保存傳入的更新函數
this.getter = expOrFn;
// 新建 watcher 的時候，立即執行更新函數
this.get();
};
Watcher.prototype.get = function() {
// 執行更新函數
this.getter.call(this.vm,this.vm);
};
Watcher.prototype.update = function() {
this.get()
}
看到上面的源碼
1Watcher 新建實例的時候，會保存傳入的函數（這個函數會作為更新用）
2watcher 實例有 update 方法，作用是執行上一步保存的更新函數
那么 watcher 是什么時候開始創建的呢？
以頁面 watcher 舉例，探索整個實例構建的基本流程
function Vue(options) {
this._init(options);
}
Vue.prototype._init = function(options) {
// ...處理組件選項等
this.$mount()
}
Vue.prototype.$mount = function() {
// ...解析template成redner函數保存
/** 每個實例新建一個watcher，
并且利用watcher 保存更新函數 **/
new Watcher(this,
// 這個函數是更新函數，傳入watcher保存下來，用于后面頁面初始化或者頁面更新
function() {
/** ...調用保存的渲染函數生成VNode，
并生成DOM插入頁面中**/
}
);
};
看上面的源碼 和注釋大概就可以很清楚了
從 【new Vue】 到 【vm._init】 初始化 到 【vm.$mount】 掛載到頁面，整個流程就完整了
重點是清楚 watcher的更新函數
更新函數
我們可以看到這個頁面的更新函數，作用是調用 渲染函數，然后生成DOM節點插入頁面中。
更新函數會傳入Watcher ，然后被保存到 watcher 的實例中
“整個函數涉及的源碼很多，但是這里一律而過”
所以，通知更新做了這些工作
1、直接調用 watcher.update，也就是重新調用給 watcher 保存的更新函數
2、更新更新函數就是執行渲染函數，然后讀取實例最新的值（已被修改過的值），最后重新生成DOM 節點
3、DOM 節點 插入或替換頁面，完成更新
畫個通知流程圖
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105383.html
摘要：所以我今后打算把每一個內容分成白話版和源碼版。有什么錯誤的地方，感謝大家能夠指出響應式系統我們都知道，只要在實例中聲明過的數據，那么這個數據就是響應式的。什么是響應式，也即是說，數據發生改變的時候，視圖會重新渲染，匹配更新為最新的值。 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 V...
摘要：當東西發售時，就會打你的電話通知你，讓你來領取完成更新。其中涉及的幾個步驟，按上面的例子來轉化一下你買東西，就是你要使用數據你把電話給老板，電話就是你的，用于通知老板記下電話在電話本，就是把保存在中。剩下的步驟屬于依賴更新 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本 【...
寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧 【Vue原理】Props - 源碼版 今天記錄 Props 源碼流程，哎，這東西，就算是研究過了，也真是會隨著時間慢慢忘記的。 幸好我做...
寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本 【2.5.17】 如果你覺得排版難看，請點擊 下面鏈接 或者 拉到 下面關注公眾號也可以吧 【Vue原理】NextTick - 源碼版 之 服務Vue 初次看的兄弟可以先看 【Vue原理】NextTick - 白話版 簡單了解下...
摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理依賴收集源碼版之引用數據類型上 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...
閱讀 1272·2021-09-23 11:51
閱讀 1391·2021-09-04 16:45
閱讀 632·2019-08-30 15:54
閱讀 2083·2019-08-30 15:52
閱讀 1602·2019-08-30 11:17
閱讀 3105·2019-08-29 13:59
閱讀 2020·2019-08-28 18:09
閱讀 387·2019-08-26 12:15
