這應該是全網最詳細的Vue3.5版本解讀

前端欧阳發表於2024-09-05
Vue

前言

Vue3.5正式版在這兩天釋出了，網上已經有了不少關於Vue3.5版本的解讀文章。但是歐陽發現這些文章對3.5中新增的功能介紹都不是很全，所以導致不少同學有個錯覺，覺得Vue3.5版本不過如此，選擇跳過這個版本等下個大版本再去更新。所以歐陽寫了這篇超級詳細的Vue3.5版本解讀文章，小夥伴們可以看看在3.5版本中有沒有增加一些你期待的功能。

關注公眾號：【前端歐陽】，給自己一個進階vue的機會

版本號

這次的版本號是天元突破紅蓮螺巖，這是07年出的一個二次元動漫，歐陽是沒看過的。在此之前我一直以為這次的版本號會叫黑神話：悟空，可能悟空不夠二次元吧。

響應式

響應式相關的內容主要分為：重構響應式、響應式props支援解構、新增onEffectCleanup函式、新增base watch函式、新增onWatcherCleanup函式、新增pause和resume方法。

重構響應式

這次響應式的重構是屬於Vue內部最佳化，對於普通開發者來說是無感的。重構後記憶體佔用減少了56%，最佳化手段主要是透過版本計數和雙向連結串列資料結構，靈感來源於Preact signals。後續歐陽會出一系列關於響應式相關的原始碼文章，大家可以關注一波歐陽。

響應式props支援解構

在3.5中響應式props支援解構終於正式穩定了，在沒有這個功能之前我們想要在js中訪問prop必須要這樣寫：props.name，否則name將會丟失響應式。

有了響應式props解構後，在js中我們就可以直接解構出name來使用，比如下面這樣的程式碼：

<script setup lang="ts">
const { name } = defineProps({
  name: String,
});

console.log(name);
</script>

當defineProps搭配解構一起使用後，在編譯時就可以將name處理成props.name。編譯後簡化的程式碼如下：

setup(__props) {
  console.log(__props.name);
  const __returned__ = {};
  return __returned__;
}

從上面的程式碼可以看到console.log(name)經過編譯後變成了console.log(__props.name)，這樣處理後name當然就不會丟失響應式了。

新增onEffectCleanup函式

在元件解除安裝之前或者下一次watchEffect回撥執行之前會自動呼叫onEffectCleanup函式，有了這個函式後你就不需要在元件的beforeUnmount鉤子函式去統一清理一些timer了。比如下面這個場景：

import { watchEffect, ref } from "vue";
import { onEffectCleanup } from "@vue/reactivity";

const flag = ref(true);
watchEffect(() => {
  if (flag.value) {
    const timer = setInterval(() => {
      // 做一些事情
      console.log("do something");
    }, 200);
    onEffectCleanup(() => {
      clearInterval(timer);
    });
  }
});

上面這個例子在watchEffect中會去註冊一個迴圈呼叫的定時器，如果不使用onEffectCleanup，那麼我們就需要在beforeUnmount鉤子函式中去清理定時器。

但是有了onEffectCleanup後，將clearInterval放在他的回撥中就可以了。當元件解除安裝時會自動執行onEffectCleanup傳入的回撥函式，也就是會執行clearInterval清除定時器。

還有一點值得注意的是onEffectCleanup函式目前沒有在vue包中暴露出來，如果你想使用可以像我這樣從@vue/reactivity包中匯入onEffectCleanup函式。

新增base watch函式

我們之前使用的watch函式是和Vue元件以及生命週期一起實現的，他們是深度繫結的，所以watch函式程式碼的位置在vue原始碼中的runtime-core模組中。

但是有的場景中我們只想使用vue的響應式功能，也就是vue原始碼中的reactivity模組，比如小程式vuemini。為此我們不得不將runtime-core模組也匯入到專案中，或者像vuemini一樣去手寫一個watch函式。

在3.5版本中重構了一個base watch函式，這個函式的實現和vue元件沒有一毛錢關係，所以他是在reactivity模組中。詳情可以檢視我之前的文章： Vue3.5新增的baseWatch讓watch函式和Vue元件徹底分手

還有一點就是這個base watch函式對於普通開發者來說沒有什麼影響，但是對於一些下游專案，比如vuemini來說是和受益的。

新增onWatcherCleanup函式

和前面的onEffectCleanup函式類似，在元件解除安裝之前或者下一次watch回撥執行之前會自動呼叫onWatcherCleanup函式，同樣有了這個函式後你就不需要在元件的beforeUnmount鉤子函式去統一清理一些timer了。比如下面這個場景：

import { watch, ref, onWatcherCleanup } from "vue";

watch(flag, () => {
  const timer = setInterval(() => {
    // 做一些事情
    console.log("do something");
  }, 200);
  onWatcherCleanup(() => {
    console.log("清理定時器");
    clearInterval(timer);
  });
});

和onEffectCleanup函式不同的是我們可以從vue中import匯入onWatcherCleanup函式。

新增pause和resume方法

有的場景中我們可能想在“一段時間中暫停一下”，不去執行watch或者watchEffect中的回撥。等業務條件滿足後再去恢復執行watch或者watchEffect中的回撥。在這種場景中pause和resume方法就能派上用場啦。

下面這個是watchEffect的例子，程式碼如下：

<template>
  <button @click="count++">count++</button>
  <button @click="runner2.pause()">暫停</button>
  <button @click="runner2.resume()">恢復</button>
</template>

<script setup lang="ts">
import { watchEffect } from "vue";

const count = ref(0);
const runner = watchEffect(() => {
  if (count.value > 0) {
    console.log(count.value);
  }
});
</script>

在上面的demo中，點選count++按鈕後理論上每次都會執行一次watchEffect的回撥。

但是當我們點選了暫停按鈕後就會執行pause方法進行暫停，在暫停期間watchEffect的回撥就不會執行了。

當我們再次點選了恢復按鈕後就會執行resume方法進行恢復，此時watchEffect的回撥就會重新執行。

console.log的結果如下圖：
console

從上圖中可以看到count列印到4後就沒接著列印了，因為我們執行了pause方法暫停了。當重新執行了resume方法恢復後可以看到count又重新開始列印了，此時從8開始列印了。

不光watchEffect可以執行pause和resume方法，watch一樣也可以執行pause和resume方法。程式碼如下：

const runner = watch(count, () => {
  if (count.value > 0) {
    console.log(count.value);
  }
});

runner.pause()	// 暫停方法
runner.resume()	// 恢復方法

watch的deep選項支援傳入數字

在以前deep選項的值要麼是false，要麼是true，表明是否深度監聽一個物件。在3.5中deep選項支援傳入數字了，表明監控物件的深度。

比如下面的這個demo：

const obj1 = ref({
  a: {
    b: 1,
    c: {
      d: 2,
      e: {
        f: 3,
      },
    },
  },
});

watch(
  obj1,
  () => {
    console.log("監聽到obj1變化");
  },
  {
    deep: 3,
  }
);

function changeDeep3Obj() {
  obj1.value.a.c.d = 20;
}

function changeDeep4Obj() {
  obj1.value.a.c.e.f = 30;
}

在上面的例子watch的deep選項值是3，表明監聽到物件的第3層。

changeDeep3Obj函式中就是修改物件的第3層的d屬性，所以能夠觸發watch的回撥。

而changeDeep4Obj函式是修改物件的第4層的f屬性，所以不能觸發watch的回撥。

SSR服務端渲染

服務端渲染SSR主要有這幾個部分：新增useId函式、Lazy Hydration 懶載入水合、data-allow-mismatch

新增useId函式

有時我們需要生成一個隨機數塞到DOM元素上，比如下面這個場景：

<template>
  <label :htmlFor="id">Do you like Vue3.5?</label>
  <input type="checkbox" name="vue3.5" :id="id" />
</template>

<script setup lang="ts">
const id = Math.random();
</script>

在這個場景中我們需要生成一個隨機數id，在普通的客戶端渲染中這個程式碼是沒問題的。

但是如果這個程式碼是在SSR服務端渲染中那麼就會報警告了，如下圖：
useId

上面報錯的意思是服務端和客戶端生成的id不一樣，因為服務端和客戶端都執行了一次Math.random()生成id。由於Math.random()每次執行的結果都不同，自然服務端和客戶端生成的id也不同。

useId函式的作用就是為了解決這個問題。

當然useId也可以用於客戶端渲染的一些場景，比如在列表中我們需要一個唯一鍵，但是服務端又沒有給我們，這時我們就可以使用useId給列表中的每一項生成一個唯一鍵。

Lazy Hydration 懶載入水合

非同步元件現在可以透過 defineAsyncComponent() API 的 hydrate 選項來控制何時進行水合。（歐陽覺得這個普通開發者用不上，所以就不細講了）

data-allow-mismatch

SSR中有的時候確實在服務端和客戶端生成的html不一致，比如在DOM上面渲染當前時間，程式碼如下：

<template>
  <div>當前時間是：{{ new Date() }}</div>
</template>

這種情況是避免不了會出現前面useId例子中的那種警告，此時我們可以使用data-allow-mismatch屬性來幹掉警告，程式碼如下：

<template>
  <div data-allow-mismatch>當前時間是：{{ new Date() }}</div>
</template>

Custom Element 自定義元素改進

這個歐陽也覺得平時大家都用不上，所以就不細講了。

Teleport元件新增defer延遲屬性

Teleport元件的作用是將children中的內容傳送到指定的位置去，比如下面的程式碼：

<div id="target"></div>
<Teleport to="#target">被傳送的內容</Teleport>

文案被傳送的內容最終會渲染在id="target"的div元素中。

在之前有個限制，就是不能將<div id="target">放在Teleport元件的後面。

這個也很容易理解DOM是從上向下開始渲染的，如果先渲染到Teleport元件。然後就會去找id的值為target的元素，如果找不到當然就不能成功的將Teleport元件的子節點傳送到target的位置。

在3.5中為了解決這個問題，在Teleport元件上新增了一個defer延遲屬性。

加了defer延遲屬性後就能將target寫在Teleport元件的後面，程式碼如下：

<Teleport defer to="#target">被傳送的內容</Teleport>
<div id="target"></div>

defer延遲屬性的實現也很簡單，就是等這一輪渲染週期結束後再去渲染Teleport元件。所以就算是target寫在Teleport元件的後面，等到渲染Teleport元件的時候target也已經渲染到頁面上了。

useTemplateRef函式

vue3中想要訪問DOM和子元件可以使用ref進行模版引用，但是這個ref有一些讓人迷惑的地方。

比如定義的ref變數到底是一個響應式資料還是DOM元素？

還有template中ref屬性的值明明是一個字串，比如ref="inputEl"，怎麼就和script中同名的inputEl變數綁到一塊了呢？

3.5中的useTemplateRef函式就可以完美的解決了這些問題。

這是3.5之前使用ref訪問input輸入框的例子：

<input type="text" ref="inputEl" />

const inputEl = ref<HTMLInputElement>();

這個寫法很不符合程式設計直覺，不知道有多少同學和歐陽一樣最開始用vue3時會給ref屬性繫結一個響應式變數。比如這樣：:ref="inputEl"

更加要命的是這樣寫還不會報錯，就是inputEl中的值一直是undefined。

最後一番排查後才發現ref屬性應該是繫結的變數名稱：ref="inputEl"

使用useTemplateRef函式後就好多了，程式碼如下：

<input type="text" ref="inputRef" />

const inputEl = useTemplateRef<HTMLInputElement>("inputRef");

使用useTemplateRef函式後會返回一個ref變數，useTemplateRef函式傳的引數是字串"inputRef"。

在template中ref屬性的值也是字串"inputRef"，所以useTemplateRef函式的返回值就指向了DOM元素input輸入框。這個比3.5之前的體驗要好很多了，詳情可以檢視我之前的文章： 牛逼！Vue3.5的useTemplateRef讓ref操作DOM更加絲滑

總結

對於開發者來說Vue3.5版本中還是新增了許多有趣的功能的，比如：onEffectCleanup函式、onWatcherCleanup函式、pause和resume方法、watch的deep選項支援傳入數字、useId函式、Teleport元件新增defer延遲屬性、useTemplateRef函式。

這些功能在一些特殊場景中還是很有用的，歐陽的個人看法還是得將Vue升到3.5。

關注公眾號：【前端歐陽】，給自己一個進階vue的機會

另外歐陽寫了一本開源電子書vue3編譯原理揭秘，看完這本書可以讓你對vue編譯的認知有質的提升。這本書初、中級前端能看懂，完全免費，只求一個star。

相關文章