腳本之家服務器常用軟件

快捷導航

一文帶你掌握?Vue3.5常用特性

更新時間：2025年01月24日 10:38:21 作者：唯之為之

Vue3.5?發(fā)布已近半年,這篇文章主要來和大家技術一下它常用的新增和改動特性,文中的示例代碼講解詳細,有需要的小伙伴可以跟隨小編一起學習一下

響應式 Props 解構

Vue3.5 中 Props 正式支持解構了，并添加了響應式跟蹤

設置默認值

使用 JavaScript 原生的默認值語法聲明 props 默認值

以前

const props = withDefaults(
  defineProps<{
    count?: number
    msg?: string
  }>(),
  {
    count: 0,
    msg: 'hello'
  }
)

現(xiàn)在

const { count = 0, msg = 'hello' } = defineProps<{
  count?: number
  message?: string
}>()

響應式解構

當在同一個 <script setup> 代碼塊中訪問由 defineProps 解構的變量時，Vue 編譯器會自動在前面添加 props

以前

const { foo } = defineProps(['foo'])
 
watchEffect(() => {
  // 在 3.5 之前只運行一次
  console.log(foo)
})

現(xiàn)在

const { foo } = defineProps(['foo'])
 
watchEffect(() => {
  // 在 3.5 中在 "foo" prop 變化時重新執(zhí)行
  console.log(foo)
  // `foo` 由編譯器轉換為 `props.foo`，以上等同于 `console.log(props.foo)`
})

與之類似，監(jiān)聽解構的 prop 變量或將其傳遞到可組合項中同時保留響應性時需要將其包裝在 getter 中

以前

const { foo } = defineProps(['foo'])
 
watch(foo, /* ... */)

現(xiàn)在：

// watch(foo, /* ... */) 等價于 watch(props.foo, ...)，我們給 watch 傳遞的是一個值而不是響應式數據源
watch(() => foo, /* ... */)
 
// 傳遞解構的 prop 到外部函數中并保持響應性
useComposable(() => foo)

監(jiān)聽(watch / watcheffect) 相關

watch 支持指定深度 deep: number

watch 的 deep 選項現(xiàn)在支持傳入數字，來指定監(jiān)聽的深度

const state = ref({
  a: {
    b: {
      c: 1
    }
  }
})
 
watch(state, (newValue) => {
    console.log(`state: ${newValue}`)
  },
  { deep: 2 }
)
 
state.a.b = { c: 2 } // 更改了第二層的屬性，觸發(fā)監(jiān)聽
state.a.b.c = 2 // 更改了第三層的屬性，不觸發(fā)監(jiān)聽

清理函數 onWatcherCleanup / onEffectCleanup

以前我們在監(jiān)聽函數中要發(fā)送異步請求時，很可能發(fā)生請求參數發(fā)生變化的情況，這時我們需要設置全局變量存儲 AbortController，并在組件卸載之前清理它

import { watch, onBeforeUnmount } from "vue"
 
let controller = new AbortController()
 
watch(state, (newValue) => {
    controller.abort() // 取消上一次的請求
    controller = new AbortController()
 
    fetch(`/api/${newValue}`, { signal: controller.signal }).then(() => {
    // 回調邏輯
  })
});
 
// 組件卸載前也要清理
onBeforeUnmount(() => controller.abort())

現(xiàn)在有了清理函數 onWatcherCleanup / onEffectCleanup 后，我們可以直接調用它來清理之前的調用(異步)函數/請求

import { watch, onWatcherCleanup } from 'vue'
 
watch(id, (newId) => {
  const controller = new AbortController()
 
  fetch(`/api/${newId}`, { signal: controller.signal }).then(() => {
    // 回調邏輯
  })
 
  onWatcherCleanup(() => {
    // 終止過期請求
    controller.abort()
  })
})

onEffectCleanup 函數寫法類似以上，不同的是導入來源

import { onEffectCleanup } from "@vue/reactivity";

[!WARNING]
onWatcherCleanup 僅在 Vue 3.5+ 中支持，并且必須在 watchEffect 效果函數或 watch 回調函數的同步執(zhí)行期間調用：你不能在異步函數的 await 語句之后調用它。

watch 返回值增強

watch 返回值中新增暫停/恢復偵聽器，可以更細致的控制監(jiān)聽作用范圍

const { stop, pause, resume } = watch(() => {})
 
// 暫停偵聽器
pause()
 
// 稍后恢復
resume()

SSR 改進

惰性激活 Lazy Hydration

異步組件可以通過 defineAsyncComponent() API 中的 hydrate 選項來控制何時進行激活

在空閑時進行激活

import { defineAsyncComponent, hydrateOnIdle } from 'vue'
 
const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnIdle(/* 傳遞可選的最大超時 */)
})

在元素變?yōu)榭梢姇r激活

import { defineAsyncComponent, hydrateOnVisible } from 'vue'
 
const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnVisible()
})

自定義策略

import { defineAsyncComponent, type HydrationStrategy } from 'vue'
 
const myStrategy: HydrationStrategy = (hydrate, forEachElement) => {
  // forEachElement 是一個遍歷組件未激活的 DOM 中所有根元素的輔助函數，
  // 因為根元素可能是一個片段而非單個元素
  forEachElement(el => {
    // ...
  })
  // 準備好時調用 `hydrate`
  hydrate()
  return () => {
    // 如必要，返回一個銷毀函數
  }
}
 
const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: myStrategy
})

其他

請查看 Vue3官方文檔 - 惰性激活，這里不再贅述

useId() 生成唯一應用ID

用于為無障礙屬性或表單元素生成每個應用內唯一的 ID。在我們日常應用中，主要可以解決服務端和客戶端生成的id不一樣導致渲染報錯的問題

<script setup>
import { useId } from 'vue'
 
const id = useId()
</script>
 
<template>
  <form>
    <label :for="id">Name:</label>
    <input :id="id" type="text" />
  </form>
</template>

data-allow-mismatch

如果客戶端值不可避免地與其服務端對應值（例如日期）不同，我們可以使用屬性 data-allow-mismatch 來避免由此產生的激活不匹配警告

<span data-allow-mismatch>{{ data.toLocaleString() }}</span>

還可以指定特定類型。允許的值有：text，children (僅允許直接子組件不匹配)，class，style，attribute

其他

useTemplateRef()

返回一個淺層 ref，可以更直觀的綁定元素，同時也支持動態(tài)綁定

<script setup>
import { ref, useTemplateRef, onMounted } from 'vue'
 
const targetRef = ref('input1')
const inputRef = useTemplateRef<HTMLInputElement>(targetRef.value)
 
onMounted(() => {
  inputRef.value.focus()
})
</script>
 
<template>
  <input ref="input1" />
    <input ref="input2" />
</template>

其他不常用的就不在說明了

到此這篇關于一文帶你掌握 Vue3.5常用特性的文章就介紹到這了,更多相關Vue3.5常用特性內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: