Vue.js 的雙向綁定是 Vue 框架的核心特性之一，它允許數(shù)據(jù)和視圖之間保持同步。雖然 Vue 2 和 Vue 3 都實(shí)現(xiàn)了雙向綁定，但它們在實(shí)現(xiàn)細(xì)節(jié)上有所不同。

Vue 2 雙向綁定的原理

在 Vue 2 中，雙向綁定主要依賴于 Object.defineProperty 和觀察者模式。以下是 Vue 2 雙向綁定的工作原理：

1. 數(shù)據(jù)劫持：Vue 2 使用 Object.defineProperty 劫持?jǐn)?shù)據(jù)對象的屬性，通過 getter 和 setter 攔截屬性的讀取和賦值操作。
2. 依賴收集：在 getter 中，Vue 2 會收集依賴（即觀察者），將依賴添加到一個(gè)依賴管理器（Dep）中。
3. 派發(fā)更新：在 setter 中，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue 2 會通知所有依賴進(jìn)行更新，觸發(fā)視圖的重新渲染。

示例

let data = { message: 'Hello Vue 2!' };Object.defineProperty(data, 'message', {get() {// 依賴收集console.log('getter: ', data.message);return data.message;},set(newValue) {// 派發(fā)更新console.log('setter: ', newValue);data.message = newValue;// 通知視圖更新}
});data.message = 'Hello World!';

Vue 3 雙向綁定的原理

在 Vue 3 中，雙向綁定主要依賴于 ES6 的 Proxy 對象。Proxy 提供了更強(qiáng)大和靈活的方式來攔截和定義基本操作（如屬性讀取、賦值、刪除等）。

1. 數(shù)據(jù)劫持：Vue 3 使用 Proxy 劫持整個(gè)對象，而不是單個(gè)屬性。
2. 依賴收集：在 Proxy 的 get 攔截器中，Vue 3 會收集依賴，將依賴添加到一個(gè)依賴管理器（ReactiveEffect）中。
3. 派發(fā)更新：在 Proxy 的 set 攔截器中，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue 3 會通知所有依賴進(jìn)行更新，觸發(fā)視圖的重新渲染。

示例

let data = { message: 'Hello Vue 3!' };const handler = {get(target, key) {// 依賴收集console.log('getter: ', target[key]);return target[key];},set(target, key, value) {// 派發(fā)更新console.log('setter: ', value);target[key] = value;// 通知視圖更新return true;}
};const proxyData = new Proxy(data, handler);proxyData.message = 'Hello World!';

總結(jié)

• Vue 2：使用 Object.defineProperty 劫持?jǐn)?shù)據(jù)對象的屬性，通過 getter 和 setter 實(shí)現(xiàn)依賴收集和派發(fā)更新。
• Vue 3：使用 ES6 的 Proxy 對象劫持整個(gè)數(shù)據(jù)對象，通過 Proxy 的 get 和 set 攔截器實(shí)現(xiàn)依賴收集和派發(fā)更新。

Vue 3 的 Proxy 機(jī)制相比 Vue 2 的 Object.defineProperty 更加靈活和強(qiáng)大，能夠更好地處理數(shù)組和對象的新增屬性等情況，從而提升了性能和開發(fā)體驗(yàn)。

拓展

Proxy 相比 Object.defineProperty 更加強(qiáng)大和靈活，主要體現(xiàn)在以下幾個(gè)方面：

1. 劫持整個(gè)對象：Proxy 可以劫持整個(gè)對象，包括新增和刪除的屬性，而 Object.defineProperty 只能劫持已有屬性。
2. 支持更多操作：Proxy 可以攔截和定義多種操作，而 Object.defineProperty 只能攔截屬性的讀取和賦值。
3. 數(shù)組的處理：Proxy 可以直接劫持?jǐn)?shù)組的各種操作，而 Object.defineProperty 需要手動(dòng)處理數(shù)組方法的重寫。
4. 性能和代碼簡潔性：Proxy 使代碼更加簡潔，性能也更好，而 Object.defineProperty 需要對每個(gè)屬性進(jìn)行劫持，代碼復(fù)雜度和性能開銷較大。

這些優(yōu)勢使得 Vue 3 在實(shí)現(xiàn)雙向綁定時(shí)選擇了 Proxy，從而提升了性能和開發(fā)體驗(yàn)。