Vue.js 正准备推出新的小版本 Vue 3.5。这个版本（目前处于 Alpha 阶段），带来了一系列的增强功能、新特性和重要的变更，以提升开发体验和用户体验。以下是根据官方 changelog以及我们的朋友 Michael 和 Alex 在 DejaVue 播客中对 Evan 的采访，整理出来的 Vue 3.5 即将带来的内容。

响应式属性解构
响应式属性解构已经处于实验状态约一年了，但随着 3.5 版本的发布，它将成为一个稳定特性。这个特性允许你从defineProps宏中解构属性而不会失去响应性。

import { watchEffect } from 'vue'
const { count } = defineProps(['count'])
watchEffect(() => {
  // 每当父组件中的 count 属性发生变化时，这里就会记录
  console.log(count)
})

尤雨溪说：“几乎每一个在实际项目中大规模使用响应式属性解构的开发者都反馈良好。他们表示喜欢这个特性，希望看到这个特性被稳定下来。”
对于那些不想使用这个特性的人，也提供了一个标志来关闭它。

// vite.config.js
export default {
  plugins: [
    vue({
      script: {
        propsDestructure: false
      }
    })
  ]
}
useTemplateRef
<script setup>
// 首先定义一个值为 undefined 或 null 的 ref，并随意命名结果变量
const divEl = ref();
</script>

<template>
<!-- 然后在模板中的某个地方使用与 `ref` 属性值相同的名称
 -->
<div ref="divEl" ></div>
</template>

这种方法存在两个问题：
1.有时会令人困惑。divEl是响应式数据还是一个 DOM 元素？如果有命名模板引用的约定，那还不算太差，但最终你还必须查看模板中匹配的ref=才能确定。

2.此外，这限制了你只能在组件的 script 里定义模版的 refs。这意味着自定义 composables 想要访问 DOM 元素的话，必须接受一个 template 引用作为参数。

现在有了useTemplateRef，这两个问题都得到了解决。

// MyComposable
export const useMyComposable = (options = {
  templateRef: 'el'
})=>{
  // 由于函数名称的关系，很明显这是一个模板引用👇
  const theEl = useTemplateRef(options.templateRef);
}
// MyComponent
<script setup>
// 堆代码 duidaima.com
// 无需在组件中定义模板引用，这可以是组合函数的工作
useMyComposable()
useMyComposable({ templateRef: 'el2' })
</script>
<template>
<div ref="el"></div>
<div ref="el2"></div>
</template>

useId
新的useId工具组合函数返回一个在服务器渲染和客户端渲染中都稳定的唯一 ID（又一种避免 hydration 不匹配的方式，太好了！🎉）。和表单元素属性（如for和id）以及 accessibility 属性一起使用非常完美。

<!--MyCustomInput-->
<script setup>
defineProps({
  label: String
  help: String
  //...
})

const inputId = uesId();
const helpTextId = useId();
</setup>
<template>

<label :for="inputId">{{label}}</label>
<input :id="inputId" :aria-describedby="helpTextId"/>
<p :id="helpTextId">{{ help }}</p>

</template>

内存改进 === 更快的应用
根据尤雨溪的说法，“第一个重大变化是内部响应式重构的第二次尝试。”重构意味着减少 60%的内存使用量，这对于任何处理大型响应式数据数组的应用来说都是一个巨大的胜利。实际上，Vue 团队特别注意单独优化了许多常见的数组方法，以便在数组上迭代的速度可以提高多达 10 倍。

SSR 相关改进
虽然尚未在变更日志中提及，但 Evan 提到其他与 SSR 相关的改进正在进行中，包括：
1.使用异步组件作为边界的懒加载水合[3]。这意味着你将能够在异步组件的定义中定义何时将用于在客户端水合组件的 JavaScript 发送到浏览器。

2.有选择地允许水合不匹配[4]，使处理在客户端和服务器之间永远不会相同的数据（如日期）变得更容易。

结论
这些只是你在 Vue 的下一个小版本（Vue 3.5）中可以期待的一些亮点。其他错误修复和特性包括：
1.更好的属性类型推断
2.支持直接在Transition内部嵌套Teleport
3.app.onUnmount()用于注册清理函数
4.onScopeDispose的failSilently参数
以及更多！