Vue 2 與 Vue 3 差別

發表於 分類於
探索 Vue 2 和 Vue 3 之間的主要差異，包括生命週期變化、響應系統的改進、Composition API 的引入、TypeScript 支持以及片段功能，幫助您更好地理解這兩個版本的特點和優勢。

生命週期的變化

Vue 2.x Vue 3
beforeCreate 使用 setup()
created 使用 setup()
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted
errorCaptured onErrorCaptured

使用 Proxy 取代 defineProperty

在 Vue 2 中，雙向綁定的核心是使用 Object.defineProperty()，這導致了一些限制。以下是兩者的對比：

  • Object.defineProperty() 的限制

    • 只能在物件的初始定義時監聽屬性，對於後來新增的屬性無法自動監聽。
    • 對於陣列，操作的監聽也相對複雜，需使用額外的方法來監控變更。

    範例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Object.defineProperty(Obj, 'name', {
        enumerable: true,
        configurable: true,
        get: function () {
            return this._name;
        },
        set: function (val) {
            this._name = val;
        }
    });

  • Proxy 的優勢

    • Proxy 允許我們直接攔截對物件的讀取和寫入操作，並可以針對整個物件進行監控，而不僅僅是單個屬性。
    • 使得我們能夠更靈活地設置監聽器，並且可以動態監聽新增屬性。

    範例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    const handler = {
        get: function(obj, prop) {
            return prop in obj ? obj[prop] : '屬性不存在';
        },
        set: function(obj, prop, value) {
            obj[prop] = value;
            return true;
        }
    };
    const p = new Proxy({}, handler);
    p.a = 1;
    console.log(p.a); // 1
    console.log(p.b); // '屬性不存在'

這樣的改變使得 Vue 3 的響應系統更為強大與高效，能夠隨時監控物件的變更，並且大大簡化了程式碼。

Composition API

Vue 3 引入了 Composition API，這是一種新的組件設計方式，使得邏輯重用變得更簡單。相比於 Vue 2 的 Options API，Composition API 讓開發者可以更靈活地組織代碼。

TypeScript 支持

Vue 3 更加優化了對 TypeScript 的支持，讓開發者能夠更輕鬆地進行類型檢查，從而提升代碼質量和開發效率。

Fragment

Vue 3 引入了片段（Fragments）功能，允許一個組件返回多個根節點，從而簡化組件結構，減少不必要的包裹元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- Vue 2 -->
<template>
  <div>
    <div>...</div>
    <div>...</div>
  </div>
</template>

<!-- Vue 3 -->
<template>
  <div>...</div>
  <div>...</div>
</template>

瀏覽器相容性

Vue 2.x 在 IE 上還有支援，而 Vue 3 使用了 Proxy 在 IE 之外的主要瀏覽器中都有很好的支援。因此，Vue 3 放棄了對 IE 的支援，符合現代開發的需求。