Vue 3.5 新特性解析

在Vue 3.5中，几个新特性值得关注，它们将极大简化和增强你的开发体验。让我们逐一深入了解这些特性。

1. defineProps支持解构

在Vue 3.5中，defineProps现在支持解构。你可以直接从defineProps中解构出需要的属性，而不必像以前一样使用props.xxx。例如：

const { age = 0, name = '张三' } = defineProps<{
  age?: number;
  name?: string;
}>();

const test = () => {
    console.log('----->', name, age);
}

这样可以简化代码，并使其更加清晰。然而，对于不常使用setup语法糖的开发者来说，这一变化可能影响不大。

2. useTemplateRef - 定义模板的 DOM 元素的 ref

useTemplateRef是一个新引入的 API，它使得定义模板中的 DOM 元素的 ref 更加直观和简洁。使用示例如下：

<script setup>
import { useTemplateRef, onMounted } from 'vue'

const inputRef = useTemplateRef('inputRef')

onMounted(() => {
  inputRef.value.focus()
})
</script>

<template>
  <input ref="inputRef" />
</template>

这个新 API 解决了以前使用 ref() 声明 DOM 元素时的混淆问题，使得代码更具可读性。

3. useId - 获取唯一的 Vue 实例 ID

useId 提供了一个生成唯一 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>

这一特性有助于确保 ID 的唯一性，避免了手动管理 ID 的麻烦。

4. watch 中 deep 支持数字

watch 现在允许在 deep 属性中传入数字，指定监听响应性数据的层级。这对于细化数据监听非常有用：

const testData = reactive({
  a: {
    b: {
      c: {
        d: 1
      }
    }
  }
})

watch(
  () => testData, 
  () => {
    console.log('state changed')
  },
  { deep: 2 }
);

testData.a.b = { c: { d: 2 } } // 触发监听
testData.a.b.c = { d: 3 } // 不触发

这种方式能精确控制监听的深度，提高性能和控制力。

5. onWatcherCleanup - 清除副作用

onWatcherCleanup 允许在 watch 函数中注册清理副作用的操作：

import { watch, onWatcherCleanup } from 'vue'

watch(id, (newId) => {
  const { response, cancel } = doAsyncWork(newId)
  onWatcherCleanup(cancel)
})

watch(id, (newId, oldId, onCleanup) => {
  const { response, cancel } = doAsyncWork(newId)
  onCleanup(cancel);
})

在组件卸载之前或者下一次 watch 回调执行之前会自动调用 onWatcherCleanup 函数，同样有了这个函数后你就不需要在组件的 beforeUnmount 钩子函数去统一清理一些 timer 了

这使得处理异步操作和清理副作用变得更加简便。

6. defineModel - 简化 v-model 实现

虽然 defineModel 是 Vue 3.4 中的功能，但它简化了 v-model 的实现，值得记住。更多信息可以参考 Vue 官方文档：defineModel。