Vue 3.5 即将到来：探索最新特性与性能提升

• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

Vue 正在为 Vue 3.5 版本进行准备。这一新版本（目前处于 Alpha 阶段）带来了一系列的增强功能、新特性以及重要的改动，以提升开发者和用户的体验。根据官方的更新日志，我们来看看 Vue 3.5 中即将推出的内容。

github:https://github.com/vuejs/core/blob/minor/CHANGELOG.md

响应式属性解构

响应式属性解构已经处于实验状态大约一年了，但在 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. 这也限制了你只能在组件脚本 setup 部分中定义模板引用。这意味着希望访问 DOM 元素的组合函数必须接受模板引用作为参数。

现在使用 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

新的 useId 实用组合函数返回一个在服务器渲染和客户端渲染之间稳定的唯一 ID（这样可以减少应用中出现水合不匹配的风险）。这对于表单元素的 for 和 id 属性以及可访问性属性非常有用。

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

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

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

</template>

内存改进 === 更快的应用

据 尤雨溪 说，“第一个显著的变化是内部响应性重构的第二次尝试。”重构意味着内存使用量减少了 60%，这对于任何处理大型响应式数据数组的应用来说都是一个巨大的胜利。实际上，Vue 团队特别优化了许多常见的数组方法，使得遍历数组的速度提高了多达 10 倍。

你可以在 DejaVue 播客的《The Future of Vue.js》这一集中听到 Evan 自己的介绍，或者查看更新日志以获取更多信息。

博客地址：https://www.youtube.com/watch?v=xvkf3KOaRlQ&t=890s

与 SSR 相关的改进

尽管这些内容还未写入更新日志，Evan 提到其他与 SSR 相关的改进正在进行中，包括：

• 使用异步组件作为边界进行延迟水合。这意味着你将能够在定义异步组件时指定何时将用于客户端水合组件的 JavaScript 发送到浏览器。
• 有选择地允许水合不匹配，使处理客户端和服务器之间从未期望相同的数据（如日期）变得更容易。

结论

这些只是 Vue 下一个次版本（Vue 3.5）中一些令人期待的亮点。其他的 bug 修复和新特性还包括：

• 更好的属性类型推断
• 支持在 Transition 内直接嵌套 Teleport
• app.onUnmount() 用于注册清理函数
• onScopeDispose 的 failSilently 参数
• 以及更多！

查看更新日志，并且如果你对此版本感到好奇，一定要看看这期播客！

更新日志地址：https://github.com/vuejs/core/blob/minor/CHANGELOG.md

首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。