Vue 3.5 即将发布，新特性抢先看

2024年08月29，Vue 发布 v3.5 rc(Release Candidate) 版本，预示着 v3.5 稳定版本即将发布。该版本带来了一系列增强功能、新特性和重要变更，以改善开发和用户体验。

Vue 3.5 is now in RC! We recommend everyone to try out 3.5.0-rc.1 in your projects early to catch potential regressions. If no major issues are found, expect 3.5 stable next week.

Vue 是一款用于构建用户界面的渐进式 JavaScript 框架，它以其简洁的 API、灵活的组件化开发和高效的性能而广受欢迎，Vue 重要节点回顾：

• 2014年02月：首次公开宣布。
• 2015年10月：Vue v1.0 发布。
• 2016年10月：Vue v2.0 发布，带来虚拟DOM、SSR、指令系统、组件系统、响应式系统、自定义事件等众多特性和优化，同时尤雨溪开始全职投入 Vue 开发。
• 2020年09月：Vue v3.0 发布，从2018年09月启动开发，历时两年，带来Composition API、更小的体积、更快的性能以及跨平台支持等特性和优化。
• 2023年12月：Vue v2.0 停止维护，生命周期结束，不再得到官方支持，受到前端开发者广泛关注。
• 2023年12月：Vue v3.4 发布，解析器速度提高 2 倍，SFC 构建性能提升。

下面我们将根据官方更新日志来看看 Vue 3.5 将带来哪些新功能。

Reactive Props Destructure

随着 3.5 版本的发布，响应式属性解构将成为一个稳定特性。这个特性允许你从defineProps宏中解构属性而不会失去响应性。

import { watchEffect } from 'vue'

const { count } = defineProps(['count'])

watchEffect(() => {
  // this will log every time the count prop changes from parent
  console.log(count)
})

尤雨溪说：“几乎每一个在实际项目中大规模使用响应式属性解构的开发者都反馈良好。他们表示很喜欢这个特性，希望看到这个特性被稳定下来。”

对于那些不想使用这个特性的人，也提供了一个标志来关闭它。可以在 vite.config.js 文件中配置 propsDestructure 属性来关闭它。

// vite.config.js
export default {
  plugins: [
    vue({
      script: {
        propsDestructure: false
      }
    })
  ]
}

useTemplateRef

当前声明模板引用的过程如下:

<script setup>
// first you defined a ref with the value of undefined or null
// and name the resulting vartiable whatever you want
const divEl = ref();
</script>

<template>
<!-- Then use the same name as the value for a `ref` attribute 
somewhere in the template
 -->
<div ref="divEl" ></div>
</template>

这种方法存在两个问题：

1. 有时候会令人困惑。divEl 是响应式数据还是DOM元素？如果你有一个命名模板引用的约定，这并不是坏事，但最终你还是要在模板中查找匹配的ref=来确保。
2. 此外，这限制了你只能在组件脚本设置部分定义模板引用。这意味着需要访问DOM元素的组合函数必须将模板引用作为参数接受。

现在，使用useTemplateRef，这两个问题都得以解决。

// MyComposable
export const useMyComposable = (options = { templateRef: 'el' })=>{
  // very clearly a template ref due to the name of the function 👇 
  const theEl = useTemplateRef(options.templateRef);
}

// MyComponent
<script setup>
  // no need to define the template ref in the component
  // that can be the composables job
  useMyComposable()
  useMyComposable({ templateRef: 'el2' })
</script>
<template>
  <div ref="el"></div>
  <div ref="el2"></div>
</template>

useId

新的 useId 实用函数返回一个在服务器渲染和客户端渲染过程中保持稳定的唯一ID（这样可以减少 hydration 不匹配的问题出现在您的应用程序中的方式，太棒了！🎉）。这对于与表单元素属性（如for和id）以及accessibility属性一起使用非常nice。

<!--MyCustomInput-->
<script setup>
  defineProps({
    label: String
    help: String
    //...
  });
  const inputId = uesId();
  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 倍之多。

SSR 相关改进

虽然尚未出现在变更日志中，但 Evan 提到其他与 SSR 相关的改进即将推出，包括：

• 使用 async 组件作为边界的懒式水合。这意味着您可以在定义 async 组件时定义客户端水合组件的 JavaScript 发送到浏览器的时间。
• 有选择性地允许水合不匹配，从而更轻松地处理客户端和服务器之间永远不会相同的数据（如日期）。

总结

Vue 3.5 的新特性不仅提升了开发效率和用户体验，还通过性能优化和 SSR 相关改进，为开发者提供了更加强大和灵活的工具。

参考链接：

• https://github.com/vuejs/core/releases/tag/v3.5.0-rc.1
• https://github.com/vuejs/core/blob/main/CHANGELOG.md
• https://www.youtube.com/watch?t=890&v=xvkf3KOaRlQ&feature=youtu.be
• https://vueschool.io/articles/vuejs-tutorials/whats-coming-in-vue-3-5/