1.生命周期

對(duì)于生命周期來說，整體上變化不大，只是大部分生命周期鉤子名稱上 + “on”，功能上是類似的。不過有一點(diǎn)需要注意，Vue3 在組合式API（Composition API，下面展開）中使用生命周期鉤子時(shí)需要先引入，而 Vue2 在選項(xiàng)API（Options API）中可以直接調(diào)用生命周期鉤子。

import { onMounted } from 'vue';   // 使用前需引入生命周期鉤子
// 可將不同的邏輯拆開成多個(gè)onMounted，依然按順序執(zhí)行，不會(huì)被覆蓋
onMounted(() => {
  // ...
});

2.API

Vue2是選項(xiàng)API（Options API），一個(gè)邏輯會(huì)散亂在文件不同位置（data、props、computed、watch、生命周期鉤子等），導(dǎo)致代碼的可讀性變差。當(dāng)需要修改某個(gè)邏輯時(shí)，需要上下來回跳轉(zhuǎn)文件位置。

Vue3組合式API（Composition API）則很好地解決了這個(gè)問題，可將同一邏輯的內(nèi)容寫到一起，增強(qiáng)了代碼的可讀性、內(nèi)聚性，其還提供了較為完美的邏輯復(fù)用性方案。所有邏輯在setup函數(shù)中，使用 ref、watch 等函數(shù)組織代碼。

3.setup函數(shù)

setup函數(shù)是組合式API的入口函數(shù)，默認(rèn)導(dǎo)出配置選項(xiàng)，setup函數(shù)聲明，返回模板需要數(shù)據(jù)與函數(shù)。

1.setup 函數(shù)是 Vue3 特有的選項(xiàng)，作為組合式API的起點(diǎn)

2.從組件生命周期看，它在 beforeCreate 之前執(zhí)行

3.函數(shù)中 this 不是組件實(shí)例，是 undefined

4.如果數(shù)據(jù)或者函數(shù)在模板中使用，需要在 setup 返回

5.今后在vue3的項(xiàng)目中幾乎用不到 this , 所有的東西通過函數(shù)獲取。

4.響應(yīng)式系統(tǒng)

Vue的響應(yīng)式系統(tǒng)是其核心特性之一，它使得Vue能夠智能地追蹤數(shù)據(jù)變化并自動(dòng)更新視圖。Vue的響應(yīng)式系統(tǒng)基于JavaScript對(duì)象的getter和setter屬性，通過這些屬性，Vue能夠在數(shù)據(jù)變化時(shí)通知并更新視圖。

Vue2通過Object.defineProperty來實(shí)現(xiàn)，vue3通過Proxy來實(shí)現(xiàn)數(shù)據(jù)劫持。數(shù)據(jù)劫持允許Vue監(jiān)聽數(shù)據(jù)的變化，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue會(huì)執(zhí)行與數(shù)據(jù)相關(guān)的視圖更新。

4.1 Object.defineProperty

通過遞歸遍歷對(duì)象的每個(gè)屬性，為每個(gè)屬性設(shè)置 getter 和 setter，攔截屬性的讀取和修改操作。

object.defineProperty允許你定義或修改對(duì)象上的一個(gè)屬性，并且可以指定該屬性的訪問器方法（getter和setter）。當(dāng)屬性被讀取或設(shè)置時(shí)，相應(yīng)的getter或setter將被調(diào)用。

所以他的缺點(diǎn)就是1.無法監(jiān)聽到數(shù)組的變化。2.必須遍歷對(duì)象的每個(gè)屬性。3.必須深層遍歷嵌套的對(duì)象。

4.2 proxy

proxy創(chuàng)建一個(gè)對(duì)象的代理，攔截并自定義對(duì)象的基本操作（如屬性訪問、賦值、刪除等），無需遞歸遍歷。

ES6 原生提供 Proxy 構(gòu)造函數(shù)，用來生成 Proxy 實(shí)例。

var proxy = new Proxy(target, handler);

// target 表示所要攔截的目標(biāo)對(duì)象（任何類型的對(duì)象，包括原生數(shù)組，函數(shù)，甚至另一個(gè)代理））

// handler 通常以函數(shù)作為屬性的對(duì)象，各屬性中的函數(shù)分別定義了在執(zhí)行各種操作時(shí)代理的行為

proxy主要使用的函數(shù)有以下幾種：

get(target,propkey,receiver) 攔截對(duì)象屬性的讀取;

set(target,propkey,value,receiver) 攔截對(duì)象屬性的設(shè)置;

deleteProperty(target,propKey)：攔截delete proxy[propKey]的操作，返回一個(gè)布爾值;

4.2.1 get()

get()接受三個(gè)參數(shù)，依次為目標(biāo)對(duì)象、屬性名和 proxy 實(shí)例本身，最后一個(gè)參數(shù)可選。

var person = {
  name: "張三"
};

var proxy = new Proxy(person, {
  get: function(target, propKey) {
    return Reflect.get(target,propKey)
  }
});

proxy.name // "張三"

4.2.2 set()

set方法用來攔截某個(gè)屬性的賦值操作，可以接受四個(gè)參數(shù)，依次為目標(biāo)對(duì)象、屬性名、屬性值和 Proxy 實(shí)例本身。

其必須返回布爾值，表示是否成功刪除。

// 創(chuàng)建一個(gè)普通用戶對(duì)象
const user = {
  name: "John",
  age: 25
};

// 定義 Proxy 的處理器對(duì)象，包含 set 捕獲器
const handler = {
  set(target, property, value, receiver) {
    // 1. 對(duì) age 屬性進(jìn)行驗(yàn)證
    if (property === 'age') {
      if (typeof value !== 'number') {
        throw new TypeError('年齡必須是一個(gè)數(shù)字');
      }
      if (value < 0) {
        throw new RangeError('年齡不能為負(fù)數(shù)');
      }
      if (value > 150) {
        throw new RangeError('年齡不能超過 150');
      }
    }

    // 2. 合法時(shí)更新屬性
    const result = Reflect.set(target, property, value, receiver);

    // 3. 記錄變更日志
    console.log(`屬性 ${property} 被設(shè)置為 ${value}`);
    
    return result; // 返回操作結(jié)果（布爾值）
  }
};

// 創(chuàng)建代理對(duì)象
const userProxy = new Proxy(user, handler);

// 測(cè)試合法操作
userProxy.age = 30; 
// 輸出: "屬性 age 被設(shè)置為 30"
console.log(userProxy.age); // 輸出: 30

// 測(cè)試非法操作
try {
  userProxy.age = -5; // 拋出 RangeError
} catch (error) {
  console.error(error.message); // 輸出: "年齡不能為負(fù)數(shù)"
}

try {
  userProxy.age = "thirty"; // 拋出 TypeError
} catch (error) {
  console.error(error.message); // 輸出: "年齡必須是一個(gè)數(shù)字"
}

4.2.3 deleteProperty()

deleteProperty 是 JavaScript Proxy 對(duì)象的一個(gè)捕獲器（trap），用于攔截對(duì)對(duì)象屬性的 delete 操作。

const target = { id: 1, name: "John", role: "admin" };

const handler = {
  deleteProperty(target, property) {
    if (property === 'id') {
      throw new Error('禁止刪除 id 屬性');
    }
    return Reflect.deleteProperty(target, property);
  }
};

const proxy = new Proxy(target, handler);

// 正常刪除
delete proxy.name; // 成功，target 變?yōu)?{ id: 1, role: "admin" }

// 嘗試刪除 id
try {
  delete proxy.id; // 拋出錯(cuò)誤：禁止刪除 id 屬性
} catch (error) {
  console.error(error.message);
}

5.多根節(jié)點(diǎn)

Vue2只能存在一個(gè)根節(jié)點(diǎn)，需要用一個(gè)div來包裹；Vue3 支持多個(gè)根節(jié)點(diǎn)，也就是 fragment。

// Vue2只能存在一個(gè)根節(jié)點(diǎn)，需要用一個(gè)<div>來包裹著
<template>
  <div>
    <header></header>
    <main></main>
    <footer></footer>
  </div>
</template>
 
// Vue3支持多個(gè)根節(jié)點(diǎn)
<template>
  <header></header>
  <main></main>
  <footer></footer>
</template>