前言

Vue3.5正式版在這兩天發(fā)布了，網(wǎng)上已經(jīng)有了不少關(guān)于Vue3.5版本的解讀文章。但是歐陽發(fā)現(xiàn)這些文章對3.5中新增的功能介紹都不是很全，所以導(dǎo)致不少同學(xué)有個錯覺，覺得Vue3.5版本不過如此，選擇跳過這個版本等下個大版本再去更新。所以歐陽寫了這篇超級詳細(xì)的Vue3.5版本解讀文章，小伙伴們可以看看在3.5版本中有沒有增加一些你期待的功能。

版本號

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

響應(yīng)式

響應(yīng)式相關(guān)的內(nèi)容主要分為：重構(gòu)響應(yīng)式、響應(yīng)式props支持解構(gòu)、新增onEffectCleanup函數(shù)、新增base watch函數(shù)、新增onWatcherCleanup函數(shù)、新增pause和resume方法。

重構(gòu)響應(yīng)式

這次響應(yīng)式的重構(gòu)是屬于Vue內(nèi)部優(yōu)化，對于普通開發(fā)者來說是無感的。重構(gòu)后內(nèi)存占用減少了56%，優(yōu)化手段主要是通過版本計數(shù)和雙向鏈表數(shù)據(jù)結(jié)構(gòu)，靈感來源于Preact signals。后續(xù)歐陽會出一系列關(guān)于響應(yīng)式相關(guān)的源碼文章，大家可以關(guān)注一波歐陽。

響應(yīng)式props支持解構(gòu)

在3.5中響應(yīng)式props支持解構(gòu)終于正式穩(wěn)定了，在沒有這個功能之前我們想要在js中訪問prop必須要這樣寫：props.name，否則name將會丟失響應(yīng)式。

有了響應(yīng)式props解構(gòu)后，在js中我們就可以直接解構(gòu)出name來使用，比如下面這樣的代碼：

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

console.log(name);
</script>

當(dāng)defineProps搭配解構(gòu)一起使用后，在編譯時就可以將name處理成props.name。編譯后簡化的代碼如下：

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

從上面的代碼可以看到console.log(name)經(jīng)過編譯后變成了console.log(__props.name)，這樣處理后name當(dāng)然就不會丟失響應(yīng)式了。

新增onEffectCleanup函數(shù)

在組件卸載之前或者下一次watchEffect回調(diào)執(zhí)行之前會自動調(diào)用onEffectCleanup函數(shù)，有了這個函數(shù)后你就不需要在組件的beforeUnmount鉤子函數(shù)去統(tǒng)一清理一些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中會去注冊一個循環(huán)調(diào)用的定時器，如果不使用onEffectCleanup，那么我們就需要在beforeUnmount鉤子函數(shù)中去清理定時器。

但是有了onEffectCleanup后，將clearInterval放在他的回調(diào)中就可以了。當(dāng)組件卸載時會自動執(zhí)行onEffectCleanup傳入的回調(diào)函數(shù)，也就是會執(zhí)行clearInterval清除定時器。

還有一點(diǎn)值得注意的是onEffectCleanup函數(shù)目前沒有在vue包中暴露出來，如果你想使用可以像我這樣從@vue/reactivity包中導(dǎo)入onEffectCleanup函數(shù)。

新增base watch函數(shù)

我們之前使用的watch函數(shù)是和Vue組件以及生命周期一起實(shí)現(xiàn)的，他們是深度綁定的，所以watch函數(shù)代碼的位置在vue源碼中的runtime-core模塊中。

但是有的場景中我們只想使用vue的響應(yīng)式功能，也就是vue源碼中的reactivity模塊，比如小程序vuemini。為此我們不得不將runtime-core模塊也導(dǎo)入到項(xiàng)目中，或者像vuemini一樣去手寫一個watch函數(shù)。

在3.5版本中重構(gòu)了一個base watch函數(shù)，這個函數(shù)的實(shí)現(xiàn)和vue組件沒有一毛錢關(guān)系，所以他是在reactivity模塊中。詳情可以查看我之前的文章：Vue3.5新增的baseWatch讓watch函數(shù)和Vue組件徹底分手

還有一點(diǎn)就是這個base watch函數(shù)對于普通開發(fā)者來說沒有什么影響，但是對于一些下游項(xiàng)目，比如vuemini來說是和受益的。

新增onWatcherCleanup函數(shù)

和前面的onEffectCleanup函數(shù)類似，在組件卸載之前或者下一次watch回調(diào)執(zhí)行之前會自動調(diào)用onWatcherCleanup函數(shù)，同樣有了這個函數(shù)后你就不需要在組件的beforeUnmount鉤子函數(shù)去統(tǒng)一清理一些timer了。比如下面這個場景：

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

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

和onEffectCleanup函數(shù)不同的是我們可以從vue中import導(dǎo)入onWatcherCleanup函數(shù)。

新增pause和resume方法

有的場景中我們可能想在“一段時間中暫停一下”，不去執(zhí)行watch或者watchEffect中的回調(diào)。等業(yè)務(wù)條件滿足后再去恢復(fù)執(zhí)行watch或者watchEffect中的回調(diào)。在這種場景中pause和resume方法就能派上用場啦。

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

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

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

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

在上面的demo中，點(diǎn)擊count++按鈕后理論上每次都會執(zhí)行一次watchEffect的回調(diào)。

但是當(dāng)我們點(diǎn)擊了暫停按鈕后就會執(zhí)行pause方法進(jìn)行暫停，在暫停期間watchEffect的回調(diào)就不會執(zhí)行了。

當(dāng)我們再次點(diǎn)擊了恢復(fù)按鈕后就會執(zhí)行resume方法進(jìn)行恢復(fù)，此時watchEffect的回調(diào)就會重新執(zhí)行。

console.log的結(jié)果如下圖：

圖片

從上圖中可以看到count打印到4后就沒接著打印了，因?yàn)槲覀儓?zhí)行了pause方法暫停了。當(dāng)重新執(zhí)行了resume方法恢復(fù)后可以看到count又重新開始打印了，此時從8開始打印了。

不光watchEffect可以執(zhí)行pause和resume方法，watch一樣也可以執(zhí)行pause和resume方法。代碼如下：

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

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

watch的deep選項(xiàng)支持傳入數(shù)字

在以前deep選項(xiàng)的值要么是false，要么是true，表明是否深度監(jiān)聽一個對象。在3.5中deep選項(xiàng)支持傳入數(shù)字了，表明監(jiān)控對象的深度。

比如下面的這個demo：

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

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

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

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

在上面的例子watch的deep選項(xiàng)值是3，表明監(jiān)聽到對象的第3層。

changeDeep3Obj函數(shù)中就是修改對象的第3層的d屬性，所以能夠觸發(fā)watch的回調(diào)。

而changeDeep4Obj函數(shù)是修改對象的第4層的f屬性，所以不能觸發(fā)watch的回調(diào)。

SSR服務(wù)端渲染

服務(wù)端渲染SSR主要有這幾個部分：新增useId函數(shù)、Lazy Hydration  懶加載水合、data-allow-mismatch

新增useId函數(shù)

有時我們需要生成一個隨機(jī)數(shù)塞到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>

在這個場景中我們需要生成一個隨機(jī)數(shù)id，在普通的客戶端渲染中這個代碼是沒問題的。

但是如果這個代碼是在SSR服務(wù)端渲染中那么就會報警告了，如下圖：

圖片

上面報錯的意思是服務(wù)端和客戶端生成的id不一樣，因?yàn)榉?wù)端和客戶端都執(zhí)行了一次Math.random()生成id。由于Math.random()每次執(zhí)行的結(jié)果都不同，自然服務(wù)端和客戶端生成的id也不同。

useId函數(shù)的作用就是為了解決這個問題。

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

Lazy Hydration  懶加載水合

異步組件現(xiàn)在可以通過 defineAsyncComponent() API 的 hydrate 選項(xiàng)來控制何時進(jìn)行水合。（歐陽覺得這個普通開發(fā)者用不上，所以就不細(xì)講了）

data-allow-mismatch

SSR中有的時候確實(shí)在服務(wù)端和客戶端生成的html不一致，比如在DOM上面渲染當(dāng)前時間，代碼如下：

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

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

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

Custom Element 自定義元素改進(jìn)

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

Teleport組件新增defer延遲屬性

Teleport組件的作用是將children中的內(nèi)容傳送到指定的位置去，比如下面的代碼：

<div id="target"></div>
<Teleport to="#target">被傳送的內(nèi)容</Teleport>

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

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

這個也很容易理解DOM是從上向下開始渲染的，如果先渲染到Teleport組件。然后就會去找id的值為target的元素，如果找不到當(dāng)然就不能成功的將Teleport組件的子節(jié)點(diǎn)傳送到target的位置。

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

加了defer延遲屬性后就能將target寫在Teleport組件的后面，代碼如下：

<Teleport defer to="#target">被傳送的內(nèi)容</Teleport>
<div id="target"></div>

defer延遲屬性的實(shí)現(xiàn)也很簡單，就是等這一輪渲染周期結(jié)束后再去渲染Teleport組件。所以就算是target寫在Teleport組件的后面，等到渲染Teleport組件的時候target也已經(jīng)渲染到頁面上了。

useTemplateRef函數(shù)

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

比如定義的ref變量到底是一個響應(yīng)式數(shù)據(jù)還是DOM元素？

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

3.5中的useTemplateRef函數(shù)就可以完美的解決了這些問題。

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

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

const inputEl = ref<HTMLInputElement>();

這個寫法很不符合編程直覺，不知道有多少同學(xué)和歐陽一樣最開始用vue3時會給ref屬性綁定一個響應(yīng)式變量。比如這樣：:ref="inputEl"

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

最后一番排查后才發(fā)現(xiàn)ref屬性應(yīng)該是綁定的變量名稱：ref="inputEl"

使用useTemplateRef函數(shù)后就好多了，代碼如下：

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

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

使用useTemplateRef函數(shù)后會返回一個ref變量，useTemplateRef函數(shù)傳的參數(shù)是字符串"inputRef"。

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

總結(jié)

對于開發(fā)者來說Vue3.5版本中還是新增了許多有趣的功能的，比如：onEffectCleanup函數(shù)、onWatcherCleanup函數(shù)、pause和resume方法、watch的deep選項(xiàng)支持傳入數(shù)字、useId函數(shù)、Teleport組件新增defer延遲屬性、useTemplateRef函數(shù)。

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