柚子快報邀請碼778899分享：vue.js vue響應式原理

http://yzkb.51969.com/

對于響應式原理，我們先了解vue是一個MVVM結(jié)構的框架；也就是?數(shù)據(jù)層、視圖層、數(shù)據(jù)-視圖層；響應式的原理就是實現(xiàn)當數(shù)據(jù)更新時，視圖層也要相應的更新，基于響應式原理我們可以使數(shù)據(jù)驅(qū)動視圖的實現(xiàn)變得簡單而高效

一、響應式原理

對于Vue2中的響應式處理來說，他基于js的object.defineProperty（）方法的。它的原理主要是如下幾步實現(xiàn)的：

1、數(shù)據(jù)劫持：在vue中，當你把一個普通js對象傳給vue實例作為data選項時，vue將遍歷次對象所有的屬性，并使用Object.defineProperty()把這些屬性全部轉(zhuǎn)為getter/setter。這樣，vue能夠追蹤到屬性的變化，并在屬性被訪問和修改時執(zhí)行相應的操作

2、依賴追蹤：vue內(nèi)部維護了一個依賴收集的系統(tǒng)，每個響應式對象都有一個對應的依賴集合，當數(shù)據(jù)被訪問時，會把當前的Watcher（觀察者）記錄下來。這樣，當數(shù)據(jù)發(fā)生變化時，依賴于這個數(shù)據(jù)的所有Watcher都會被通知，進而更新相應的視圖。

3、派發(fā)更新：當響應式數(shù)據(jù)發(fā)生變化時，vue會遍歷依賴集合，通知相關的Watcher更新視圖

二、為什么需要有響應式呢

響應式是為了構建動態(tài)的，交互式的用戶頁面而設計的。如果沒有響應式那么我們就需要手動去監(jiān)聽數(shù)據(jù)的變化然后更新視圖，這樣會導致性能上消耗增加，并且用戶的體驗也不會良好，而響應式使得頁面能夠在數(shù)據(jù)變化時實時更新，提供了更好的用戶體驗。用戶可以看到頁面的實時變化，而無需手動刷新頁面。

三、要如何實現(xiàn)響應式

對于響應式來說，它基于發(fā)布訂閱模式和數(shù)據(jù)劫持來實現(xiàn)的，即：

? ? ? ? 1、發(fā)布-訂閱者模式：vue使用發(fā)布-訂閱者模式來實現(xiàn)數(shù)據(jù)變動時的通知和更新

? ? ? ? 2、數(shù)據(jù)劫持：vue通過Object.defineProperty對數(shù)據(jù)進行劫持

實現(xiàn)方法：

// 定義Dep類，用于收集依賴和通知更新

class Dep {

constructor() {

this.subscribers = [];

}

// 添加訂閱者

addSubscriber(sub) {

if (sub && typeof sub.update === 'function') {

this.subscribers.push(sub);

}

}

// 發(fā)布更新

notify() {

this.subscribers.forEach(sub => sub.update());

}

}

// 定義Watcher類，用于訂閱數(shù)據(jù)變化

class Watcher {

constructor(vm, key, cb) {

this.vm = vm;

this.key = key;

this.cb = cb;

Dep.target = this;

this.vm[this.key]; // 觸發(fā) getter，收集依賴

Dep.target = null;

}

// 更新視圖

update() {

this.cb.call(this.vm, this.vm[this.key]);

}

}

// 定義Observer類，用于將對象轉(zhuǎn)為響應式對象

class Observer {

constructor(data) {

this.data = data;

this.walk(data);

}

// 遍歷對象屬性，轉(zhuǎn)為響應式

walk(data) {

Object.keys(data).forEach(key => {

this.defineReactive(data, key, data[key]);

});

}

// 定義響應式屬性

defineReactive(obj, key, value) {

const dep = new Dep();

Object.defineProperty(obj, key, {

enumerable: true,

configurable: true,

get() {

if (Dep.target) {

dep.addSubscriber(Dep.target);

}

return value;

},

set(newValue) {

if (value !== newValue) {

value = newValue;

dep.notify(); // 數(shù)據(jù)變化，通知更新

}

}

});

}

}

// Vue 類，用于創(chuàng)建 Vue 實例

class Vue {

constructor(options) {

this.options = options;

this._data = options.data;

// 數(shù)據(jù)響應化

new Observer(this._data);

// 代理 data 到 Vue 實例上

this.proxyData(this._data);

// 創(chuàng)建 Watcher 實例，觀察數(shù)據(jù)變化

options.created && options.created.call(this);

}

// 代理 data 到 Vue 實例上

proxyData(data) {

Object.keys(data).forEach(key => {

Object.defineProperty(this, key, {

enumerable: true,

configurable: true,

get() {

return this._data[key];

},

set(newValue) {

this._data[key] = newValue;

}

});

});

}

}

可以從以上代碼中看出：

Dep類用于收集依賴和通知更新，每個響應式數(shù)據(jù)都有一個對應的Dep實例watcher類用于訂閱數(shù)據(jù)變化，當數(shù)據(jù)變化時，會觸發(fā)對應watcher的更新Observer類用于將對象轉(zhuǎn)為響應式對象，遍歷對象屬性，通過object.defineProperty轉(zhuǎn)為響應式屬性vue類用于創(chuàng)建vue實例，將data選項轉(zhuǎn)為響應式對象，并創(chuàng)建對應的Watcher實例，觀察數(shù)據(jù)變化

因此通過以上代碼我們就實現(xiàn)了一個響應式原理了

四、vue3是如何實現(xiàn)響應式原理的呢

在vue3中，響應式原理采用了基于ES6 Proxy對象的方式來實現(xiàn)，相較于vue2中基于Object.defineProperty的方式，使用Proxy對象能夠更靈活地攔截對對象的各種操作，從而實現(xiàn)更加高效和強大的響應式系統(tǒng)

五、Object.defineProperty

通過以上內(nèi)容我們可以看出，Object.defineProperty（）允許我們定義對象的屬性，并且能夠通過攔截訪問和修改這些屬性的行為，實現(xiàn)對屬性的監(jiān)控和響應。這使得當對象的屬性發(fā)生變化時，能夠觸發(fā)相應的更新操作，但是我們要注意的是，它實現(xiàn)數(shù)據(jù)劫持不是進行數(shù)據(jù)代理，而是數(shù)據(jù)攔截的。就是說在數(shù)據(jù)被訪問和修改時進行攔截，并把相應的時機觸發(fā)更新操作，從而實現(xiàn)數(shù)據(jù)與視圖的同步更新。

具體來說，在vue的響應式系統(tǒng)中，當你把一個普通javaScript對象傳給vue實例作為data選項時，vue會遍歷這個對象的所有屬性，并使用Object.defineProperty（）方法把這些屬性全部轉(zhuǎn)為getter/setter。這樣一來，vue能夠追蹤到屬性的變化，并在屬性被訪問和修改時執(zhí)行相應的操作。

缺點

兼容性問題：Object.defineProperty()?在 IE8 及更早版本的瀏覽器中不被支持，這限制了 Vue 在一些舊版本瀏覽器中的應用范圍，需要額外的兼容處理 只能監(jiān)聽對象屬性：Object.defineProperty() 只能劫持對象的屬性訪問和修改操作，無法監(jiān)聽對象的新增屬性和刪除屬性的操作。這導致在 Vue 中對于新增屬性和刪除屬性的響應式處理需要額外的操作，例如需要使用 Vue.set() 或者 $set() 方法來添加新屬性 無法監(jiān)聽數(shù)組變化：Object.defineProperty() 無法直接監(jiān)聽數(shù)組的變化，因為數(shù)組的變化通常包括了數(shù)組的元素的添加、刪除和重新排序等操作，這些操作不會觸發(fā)數(shù)組的屬性變化，從而無法被Object.defineProperty() 攔截。在 Vue 中對于數(shù)組的響應式處理是通過重寫數(shù)組的一系列方法來實現(xiàn)的，如 push()、pop()、shift()、unshift() 等，這種處理方式也增加了一定的復雜性 性能開銷：對于大規(guī)模數(shù)據(jù)的響應式處理，Object.defineProperty()?可能會帶來一定的性能開銷。因為每個被劫持的屬性都需要一個對應的 getter 和 setter 函數(shù)來進行攔截和更新操作，當屬性較多時，可能會影響到整體性能

六、Proxy

對于Proxy 它是 ES6 中新增的一種代理機制，用于定義基本操作的自定義行為（例如屬性查找、賦值、枚舉、函數(shù)調(diào)用等）。它提供了一種強大而靈活的方式來監(jiān)視并對對象的操作進行攔截和定制。因此在 Vue 3 中，我們可以使用Proxy 被用于實現(xiàn)數(shù)據(jù)的響應式處理

Proxy 的特點：

可定制行為：通過定義攔截器函數(shù)，可以對對象的各種操作進行定制，使得 Proxy 對象能夠?qū)崿F(xiàn)非常靈活的代理行為。透明性：Proxy 對象與原對象具有相同的外觀和行為，因此在代碼中可以完全替代原對象，而不會影響到代碼的其他部分。非侵入性：Proxy 對象與原對象之間的代理關系是動態(tài)的，可以隨時添加或移除代理行為，而不會影響到原對象。更好的性能：與?Object.defineProperty()?相比，Proxy 的性能通常更好，特別是在處理大規(guī)模數(shù)據(jù)和數(shù)組變化時。

總的來說，Proxy?是一個強大而靈活的工具，能夠?qū)ο蟮牟僮鬟M行攔截和定制，為我們提供了更好的數(shù)據(jù)處理和操作控制的能力。

七、總結(jié)

綜上所述，我們可以得出以下結(jié)論：

理解 MVVM 結(jié)構：Vue 是一個典型的 MVVM 框架，它將數(shù)據(jù)層、視圖層和數(shù)據(jù)-視圖層進行了良好的分離，使得前端開發(fā)更加清晰和高效掌握響應式原理：響應式原理是 Vue 實現(xiàn)數(shù)據(jù)驅(qū)動視圖的關鍵，通過數(shù)據(jù)劫持和依賴追蹤，實現(xiàn)了數(shù)據(jù)與視圖之間的自動更新，為構建動態(tài)、交互式的用戶界面提供了強大的支持熟悉實現(xiàn)方式：在 Vue 2 中，響應式原理是基于Object.defineProperty()實現(xiàn)的，它具有一定的局限性和缺點，比如無法監(jiān)聽數(shù)組變化和兼容性問題。而在 Vue 3 中，采用了基于Proxy的方式，提供了更靈活、高效的響應式系統(tǒng)。 權衡利弊：Object.defineProperty()和Proxy各有優(yōu)缺點，需要根據(jù)項目的具體需求和瀏覽器兼容性要求進行選擇。Proxy 在性能和靈活性上有一定優(yōu)勢，但在一些舊版本瀏覽器中可能存在兼容性問題；而 Object.defineProperty() 則在兼容性較好的情況下實現(xiàn)了一定的數(shù)據(jù)劫持能力

兩種實現(xiàn)方式的區(qū)別：

靈活性：Proxy 提供了更加靈活和強大的攔截能力，可以攔截對象的更多操作，包括屬性的讀取、賦值、刪除、枚舉等，以及數(shù)組的操作如 push、pop、shift、unshift 等。而 Object.defineProperty() 只能劫持對象的屬性訪問和修改操作，無法直接監(jiān)聽數(shù)組的變化等兼容性：Proxy 在 ES6 中被引入，因此對于支持 ES6 的現(xiàn)代瀏覽器和環(huán)境來說，兼容性較好。但是在一些舊版本的瀏覽器中，如 IE11 及更早版本，Proxy 并不被支持。而 Object.defineProperty() 在較早的 ES5 中就已經(jīng)存在，兼容性較好，但也存在一些兼容性問題，如無法監(jiān)聽數(shù)組變化和對新增屬性的處理等性能：Proxy 相對于 Object.defineProperty() 在性能上可能會有所提升，特別是在處理大規(guī)模數(shù)據(jù)和數(shù)組變化時。Proxy 的攔截器函數(shù)在實現(xiàn)上更為底層，因此可能更加高效。而 Object.defineProperty() 的性能開銷相對較大，特別是在屬性較多時可能會影響到整體性能監(jiān)聽對象的方式：Proxy是通過創(chuàng)建一個目標對象的代理對象來實現(xiàn)監(jiān)聽的，可以直接監(jiān)聽整個對象，包括對象的屬性新增、刪除和修改等操作。而Object.defineProperty()是針對對象的每個屬性進行劫持，無法直接監(jiān)聽對象的整體變化

總的來說，深入理解vue的響應式原理和不同的實現(xiàn)方式，有助于我們更加深入地理解前端框架的底層原理，并能夠更加靈活地應對各種開發(fā)場景和需求

柚子快報邀請碼778899分享：vue.js vue響應式原理

http://yzkb.51969.com/

參考文章