Vue 3.5 即将发布，来看下官方团队怎么说吧！
前端训练营：1v1私教，终身辅导计划，帮你拿到满意的
offer。 已帮助数百位同学拿到了中大厂offer
Hello，大家好，我是 Sunday。
本文来自 Vue school 官方更新日志和尤雨溪的描述，内部会涉及到一个让人疑惑的概念【水合】，不过不用担心，下文会有解释：
正文
Vue.js 正准备发布 Vue 3.5 这个新版本。此版本（目前为 Alpha 版）带来了一系列增强功能、新功能和重要更改，以改善开发和用户体验。
以下是基于官方更新日志(https://github.com/vuejs/core/blob/minor/CHANGELOG.md)以及我们的朋友 Michael 和 Alex 在 DejaVue 播客上对 Evan 的采访(https://www.youtube.com/@DejaVueFm)，对 Vue 3.5 即将推出的功能进行了概述。
响应式 Props 解构
响应性的 props 解构已处于实验状态约一年的时间，但随着 3.5 的推出，该功能（解构 props）将稳定运行。此功能可让您从defineProps宏中解构 props，而不会失去反应性。
import { watchEffect } from 'vue'
const { count } = defineProps(['count'])
watchEffect(() => {
// count 并不会失去响应性
console.log(count)
})
尤雨溪说：“几乎每一个在实际项目中大规模使用过 [反应式 props 解构] 的 [开发者] 都给出了积极的反馈。他们说，我们喜欢这个……我们希望看到这个功能能够稳定下来。”
对于那些不想使用该功能的人，有一个标志 可以将其关闭。
// vite.config.js
export default {
plugins: [
vue({
script: {
propsDestructure: false
}
})
]
}
useTemplateRef
在之前，如果我们想要获取 dom ，那么需要这么做：
<script setup>
// 首先，您定义了一个值为undefined或空的ref
// 并以您想要的方式命名生成的可用内容
const divEl = ref();
</script>
<template>
<!-- 然后使用与“ref”属性的值相同的名称,在模板中的某个地方 -->
<div ref="divEl" ></div>
</template>
这种方法存在两个问题：
有时这很令人困惑。是divEl反应性数据还是 DOM 元素？如果您有命名模板引用的约定，那还不错，但最终您还必须在模板中查看匹配情况以ref=确保正确。 此外，这限制您只能在组件脚本设置部分内定义模板引用。这意味着想要访问 DOM 元素的可组合项必须接受模板引用作为参数。
现在（3.5 之后）使用 useTemplateRef 来解决这两个问题：
// MyComposable
export const useMyComposable = (options = {
templateRef: 'el'
})=>{
// 很明显，由于函数的名称，模板引用
const theEl = useTemplateRef(options.templateRef);
}
// MyComponent
<script setup>
// 无需在组件中定义模板参考
useMyComposable()
useMyComposable({ templateRef: 'el2' })
</script>
<template>
<div ref="el"></div>
<div ref="el2"></div>
</template>
使用标识
新的 useId 可组合项会返回一个唯一 ID，该 ID 在服务器渲染和客户端渲染中都保持稳定（又减少了一种【水合不匹配】可能潜入你应用的方式，太棒了！🎉）。
水合（hydration）：指在前端开发中，当一个应用使用服务端渲染（SSR）或静态站点生成（SSG）时，服务器会生成一个完整的 HTML 页面并发送给客户端。客户端在接收到这个 HTML 页面后，会使用 JavaScript 将页面中的静态内容与动态应用逻辑连接起来，使页面具备交互性。这个过程就是 hydration。
水合不匹配（hydration mismatches）：指在客户端渲染过程中，客户端的组件树与服务器生成的 HTML 内容不一致，可能导致 UI 显示问题或警告。
这非常适合与表单元素属性（如for 和id可访问性属性）一起使用。
<!--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 倍。”
您可以在 DejaVue 播客节目中聆听 Evan 本人的演讲：Vue.js 的未来（与 Evan You 合作）(https://www.youtube.com/watch?v=xvkf3KOaRlQ&t=890s)或者查看更新日志以了解更多信息。
SSR 相关改进
虽然还未在更新日志中公布，但是尤雨溪提到其他与 SSR（服务端渲染）相关的改进也在路上，包括：
使用异步组件作为边界的懒加载水合（hydration）。这意味着你可以在异步组件的定义中指定何时将用于水合（hydration）组件的 JavaScript 发送到浏览器。 允许选择性地忽略水合（hydration）不匹配，使得处理客户端和服务器端数据永远不会相同的情况（例如日期）更加容易。
除此之外
除此之外还有一些其他的 bug 修复和功能改进，包括：
更好的 prop 类型推断 支持直接在 Transition 中嵌套 Teleport app.onUnmount()用于注册清理函数onScopeDispose中的failSilently参数......
1v1私教，帮大家拿到满意的 offer
我目前在做一个 前端训练营 ，主打的就是：1v1 私教，帮大家拿到满意的 offer 。
也可以直接加我微信沟通，备注【训练营】：