Vue 3.5 新特性

一、useTemplateRef() ref() 替代者

引入 useTemplateRef()，进一步简化了模板引用的使用，之前模板引用的方式是使用ref()，现在可以使用该API

<script setup>
import { onMounted, useTemplateRef } from "vue";
const aaaa = useTemplateRef("div"); //参数绑定DOM元素上的ref属性
onMounted(() => {
  console.log(aaaa.value);
});
</script>

<template>
  <div ref="div">Code视界</div>
</template>

二、默认支持对 props 进行解构时，仍然保持其响应式特性

props 对象中的属性通常是响应式的。但是，当开发者将 props 解构为独立变量时，解构后的变量就不再保持响应性，在Vue3.5中解决了这个问题

const { title } = defineProps(["title"]);
// title 仍然是响应式的

三、不会重复的useId()

为每个应用程序创建单独的id，它们可用于生成表单元素和可访问性属性的 ID，并可在 SSR 应用程序中使用，而不会导致水合不匹配。

组件1：

console.log(useId()) //v:0

组件2：

console.log(useId()) //v:1

只能确保在同一个createApp里实例唯一，多个就不能保证 可以结合 app.config.idPrefix前缀创建不同项目的ID，避免掉ID冲突

app.config.idPrefix = 'app-'

app1.config.idPrefix = 'app1-'

四、onWatcherCleanup() watch的清理

清理函数，在当前 watcher 观察 即将重新运行时执行。只能在watchEffect效果函数或watch回调函数的同步执行过程中调用（即不能await在异步函数中的语句之后调用）

import { watch, onWatcherCleanup } from 'vue'

watch(id, (newId) => {
  const { response, cancel } = doAsyncWork(newId)
  // 如果之前的请求还没有完成的话 清理调用
  onWatcherCleanup(cancel)
})

watch的暂停和恢复

之前：

const stop = watch(source, callback)

stop()

3.5+

const { stop, pause, resume } = watchEffect(() => {})

// 暂时暂停观察者
pause()

// 恢复观察者
resume()

// 停止观察
stop()