Vue之Dep和Observer的用法及說明

更新時間：2023年05月17日 09:04:15 作者：陸小森_紅齊飄飄

這篇文章主要介紹了Vue之Dep和Observer的用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

一：Observer

vue 通過Observer 構(gòu)造函數(shù)，為響應(yīng)式變量添加訪問和賦值的get set的回調(diào)。

? var Observer = function Observer (value) {
? ? this.value = value;
? ? this.dep = new Dep();
? ? this.vmCount = 0;
? ? def(value, '__ob__', this);
? ? if (Array.isArray(value)) {
? ? ? if (hasProto) {
? ? ? ? protoAugment(value, arrayMethods);
? ? ? } else {
? ? ? ? copyAugment(value, arrayMethods, arrayKeys);
? ? ? }
? ? ? this.observeArray(value);
? ? } else {
? ? ? this.walk(value); // 這是非數(shù)組值添加get set 回調(diào)
? ? }
? };

批量為obj上的key添加get set的回調(diào)

? Observer.prototype.walk = function walk (obj) {
? ? var keys = Object.keys(obj);
? ? for (var i = 0; i < keys.length; i++) {
? ? ? defineReactive$$1(obj, keys[i]);
? ? }
? };

// 這個是為obj上的key添加get set方法的核心邏輯
? function defineReactive$$1 (
? ? obj,
? ? key,
? ? val,
? ? customSetter,
? ? shallow
? ) {
? ? var dep = new Dep();
? ? var property = Object.getOwnPropertyDescriptor(obj, key);
? ? if (property && property.configurable === false) {
? ? ? return
? ? }
? ? // cater for pre-defined getter/setters
? ? var getter = property && property.get;
? ? var setter = property && property.set;
? ? if ((!getter || setter) && arguments.length === 2) {
? ? ? val = obj[key];
? ? }
? ? var childOb = !shallow && observe(val);
? ? Object.defineProperty(obj, key, {
? ? ? enumerable: true,
? ? ? configurable: true,
? ? ? get: function reactiveGetter () {
? ? ? ? ?// 省略N行
? ? ? },
? ? ? set: function reactiveSetter (newVal) {
? ? ? ?// 省略N行
? ? ? }
? ? });
? }

有了這一層，當(dāng)數(shù)據(jù)獲取和修改就會觸發(fā)這里的get 和 set

二：Dep 依賴關(guān)系

變量能夠響應(yīng)數(shù)據(jù)的獲取和修改對于一個透明處理dom更新的框架來說是不夠的，框架還需要處理變量和更新dom的watcher的依賴關(guān)系。Dep就是為了干這個事情的。

在之前的文章里，介紹過Watcher，vue中的組件在掛載前，都會基于組件的render函數(shù)，生成一個Watcher實例，并執(zhí)行render函數(shù)來進(jìn)行渲染

渲染dom的時候我們需要讀取變量，這個時候就會觸發(fā)我們上一步Observer為每個變量里量身定做的get方法。那vue在get里做了什么事情呢？

請看下面一段代碼中的中文注釋：

function defineReactive$$1 (
? ? obj,
? ? key,
? ? val,
? ? customSetter,
? ? shallow
? ) {
? ? var dep = new Dep(); // 創(chuàng)建一個Dep實例
? ? var property = Object.getOwnPropertyDescriptor(obj, key);
? ? if (property && property.configurable === false) {
? ? ? return
? ? }
? ? // cater for pre-defined getter/setters
? ? var getter = property && property.get;
? ? var setter = property && property.set;
? ? if ((!getter || setter) && arguments.length === 2) {
? ? ? val = obj[key];
? ? }
? ? var childOb = !shallow && observe(val);
? ? Object.defineProperty(obj, key, {
? ? ? enumerable: true,
? ? ? configurable: true,
? ? ? get: function reactiveGetter () {
? ? ? ? var value = getter ? getter.call(obj) : val;
? ? ? ? if (Dep.target) {
? ? ? ? ? //在此處將當(dāng)前watcher加入到dep中
? ? ? ? ? dep.depend();?
? ? ? ? ? if (childOb) {
? ? ? ? ? ? childOb.dep.depend();
? ? ? ? ? ? if (Array.isArray(value)) {
? ? ? ? ? ? ? dependArray(value);
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? }
? ? ? ? return value
? ? ? },

此處有一個Dep.target 存在的條件判斷，什么是Dep.target

Dep.target = null;

當(dāng)watcher實例創(chuàng)建完，默認(rèn)回去調(diào)用get方法來渲染組件界面

這個時候會通過pushTarget(this) 將當(dāng)前watcher設(shè)置到Dep.target上去。

? Watcher.prototype.get = function get () {
? ?// 設(shè)置當(dāng)前watcher到全局變量上去
? ? pushTarget(this);
? ? var value;
? ? // 省略N行代碼
? ? return value
? };

pushTarget的具體實現(xiàn)

?function pushTarget (target) {
? ? targetStack.push(target);
? ? Dep.target = target;
? }

這一步完成后，在調(diào)用render函數(shù)觸發(fā)dom中響應(yīng)式變量的get的時候

下面的代碼就能夠執(zhí)行了

?if (Dep.target) {
? ? ? ? ? //在此處將當(dāng)前watcher加入到dep中
? ? ? ? ? dep.depend();?

dep.depend 干了啥呢？

接著看：

?Dep.prototype.depend = function depend () {
? ? // Dep.target 對應(yīng)的就是上面的全局變量里的watcher
? ? if (Dep.target) {
? ? ? Dep.target.addDep(this);
? ? }
? };

也就是調(diào)用了watcher.addDep(this)

? Watcher.prototype.addDep = function addDep (dep) {
? ? var id = dep.id;
? ? if (!this.newDepIds.has(id)) {
? ? ? this.newDepIds.add(id);
? ? ? // ?會在watcher的實際例子里維護(hù)一個所以訂閱的dep的數(shù)組
? ? ? this.newDeps.push(dep);?
? ? ? if (!this.depIds.has(id)) {
? ? ? ? dep.addSub(this);?
? ? ? }
? ? }
? };
? Dep.prototype.addSub = function addSub (sub) {
? // 繞了一大圈，最終就是把watcher 塞到dep實例的subs數(shù)組里了。
? ? this.subs.push(sub);
? };

到此，dom的渲染訂閱者和數(shù)據(jù)的觀察發(fā)布者就關(guān)聯(lián)上了。

等用戶修改數(shù)據(jù)的時候，觸發(fā)為響應(yīng)數(shù)據(jù)設(shè)計的set 回調(diào)函數(shù)

set: function reactiveSetter (newVal) {
? ? ? ? var value = getter ? getter.call(obj) : val;
? ? ? ? /* eslint-disable no-self-compare */
? ? ? ? if (newVal === value || (newVal !== newVal && value !== value)) {
? ? ? ? ? return
? ? ? ? }
? ? ? ? /* eslint-enable no-self-compare */
? ? ? ? if (customSetter) {
? ? ? ? ? customSetter();
? ? ? ? }
? ? ? ? // #7981: for accessor properties without setter
? ? ? ? if (getter && !setter) { return }
? ? ? ? if (setter) {
? ? ? ? ? setter.call(obj, newVal);
? ? ? ? } else {
? ? ? ? ? val = newVal;
? ? ? ? }
? ? ? ? childOb = !shallow && observe(newVal);
? ? ? ? // 重點看這里，這里是發(fā)布者發(fā)布數(shù)據(jù)變化的消息
? ? ? ? // dep通知所有依賴的watcher
? ? ? ? dep.notify();
? ? ? }
? ? });

dep.notify做了啥事呢？

? Dep.prototype.notify = function notify () {
? ? // stabilize the subscriber list first
? ? // subs就是上面get回調(diào)里，我們用來加入watcher依賴的數(shù)組
? ? var subs = this.subs.slice();?
? ? if (!config.async) {
? ? ? // subs aren't sorted in scheduler if not running async
? ? ? // we need to sort them now to make sure they fire in correct
? ? ? // order
? ? ? subs.sort(function (a, b) { return a.id - b.id; });
? ? }
? ? for (var i = 0, l = subs.length; i < l; i++) {
? ? // ?遍歷調(diào)用watcher的update方法
? ? ? subs[i].update();?
? ? }
? };

Dep 的構(gòu)造函數(shù)和其他實例方法：

? // Dep的構(gòu)造函數(shù)
? var Dep = function Dep () {
? ? this.id = uid++;
? ? this.subs = [];
? };
// ?取消訂閱
? Dep.prototype.removeSub = function removeSub (sub) {
? ? remove(this.subs, sub);
? };

其他相關(guān)

// 移除deps數(shù)組里的不在newDeps里的老的依賴，將之前newDeps收集的dep依賴丟給this.deps
? Watcher.prototype.cleanupDeps = function cleanupDeps () {
? ? var i = this.deps.length;
? ? while (i--) {
? ? ? var dep = this.deps[i];
? ? ? if (!this.newDepIds.has(dep.id)) {
? ? ? ? dep.removeSub(this);
? ? ? }
? ? }
? ? var tmp = this.depIds;
? ? this.depIds = this.newDepIds;
? ? this.newDepIds = tmp;
? ? this.newDepIds.clear();
? ? tmp = this.deps;
? ? this.deps = this.newDeps;
? ? this.newDeps = tmp;
? ? this.newDeps.length = 0;
? };