3.5 新特性

❗ 没有包含所有更新，只记录后续开发可能会用得到的改进

水合改进

useId

新引入一个 api: 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>

data-allow-mismatch

在某些情况下，客户端的值和服务端的值会不可避免的不同（如日期），可以使用新 api: data-allow-mismatch 来抑制水合不匹配的警告:

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

响应式解构

before.vue

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

after.vue

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

结构后得变量会自动编译为: props.var

useTemplateRef()

增加了一种新的模板引用方式: useTemplateRef()

Deferred Teleport

使用 teleport 传送时，引入 defer 属性，它会在当前渲染周期之后进行挂载

<template>
  <Teleport defer target="#container">...</Teleport>
  <div id="container"></div>
</template>

onWatcherCleanup()

引入一个新 api: onWatcherCleanup, 用于在 watch 中注册清理回调:

<script setup>
import { watch, onWatcherCleanup } from "vue";

watch(id, (newId) => {
  const controller = new AbortController();

  fetch(`/api/${newId}`, { signal: controller.signal }).then(() => {
    // callback logic
  });

  onWatcherCleanup(() => {
    // abort stale request
    controller.abort();
  });
});
</script>