Vue 3.5，终于要来了！

前端从进阶到入院 · 公众号 · · 2024-08-30 08:00

正文

Vue.js 正准备推出新的小版本 Vue 3.5。这个版本（目前处于 Alpha 阶段），带来了一系列的增强功能、新特性和重要的变更，以提升开发体验和用户体验。以下是根据官方 changelog ^[1] 以及我们的朋友 Michael 和 Alex 在 DejaVue 播客中对 Evan 的采访 ^[2] ，整理出来的 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>
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 相关的改进正在进行中，包括：
使用异步组件作为边界的懒加载水合^[3]。这意味着你将能够在异步组件的定义中定义何时将用于在客户端水合组件的 JavaScript 发送到浏览器。
有选择地允许水合不匹配^[4]，使处理在客户端和服务器之间永远不会相同的数据（如日期）变得更容易。
结论
这些只是你在 Vue 的下一个小版本（Vue 3.5）中可以期待的一些亮点。其他错误修复和特性包括：
更好的属性类型推断
支持直接在Transition内部嵌套Teleport
app.onUnmount()用于注册清理函数
onScopeDispose的failSilently参数
以及更多！



欢迎长按图片加 ssh 为好友，我会第一时间和你分享前端行业趋势，学习途径等等。2024 陪你一起度过！


关注公众号，发送消息：指南