Vue 3.2正式发布，真香！

关注

转载最新推荐文章于 2026-05-13 09:32:00 发布 1.5k 阅读 AI 写同款· GEO 优化 ›

在页面中直接嵌入vue-sfc的方法我们知道，Vue推荐使用单文件组件（Single File Component，简称SFC)，可以说SFC是Vue框架的特色。但是，我们在学习和练习的时候，如果想要用非常简单的方式在一个常规的HTML文件，或者简单的Playground（比如JSBin或者CodePen）里面使用Vue的SFC方式，是不太容易的。因此Vue官方提供了专门的SFC Playground来方便大家学习Vue。不过，有没有办法不用SFC Playground，在本地单个HTML文件或者CodePen和JSBin这样的平台使用阅读详情

8 月 5 日，Vue.js 作者尤雨溪在博客上宣布 Vue.js 3.2 版本正式发布。本文为相关内容的中文翻译。

在这里，我们高兴地宣布 Vue.js 3.2 正式发布！此版本包含一系列重要的新功能与性能改进，但并不涉及任何重大变更。

新的 SFC 功能

关于单文件组件（SFC，即.vue 文件）的两项功能已经由实验状态正式毕业，现提供稳定版本：

<script setup> 是一种编译时语法糖，能够极大改善在 SFC 中使用 Composition API 时的开发者体验。
<style> v-bind 用于在 SFC <style> 标签中启用组件状态驱动的动态 CSS 值。

下面来看示例组件如何协同使用这两项新功能：

<script setup>
import { ref } from 'vue'

const color = ref('red')
</script>

<template>
  <button @click="color = color === 'red' ? 'green' : 'red'">
    Color is: {{ color }}
  </button>
</template>

<style scoped>
button {
  color: v-bind(color);
}
</style>

感兴趣的朋友可以在 SFC Playground 中亲自尝试，或者阅读相关说明文档：

https://v3.vuejs.org/api/sfc-script-setup.html
https://v3.vuejs.org/api/sfc-style.html#state-driven-dynamic-css

我们还在<script setup>之上构建了新的 RFC，旨在通过编译器来改善 ref 的使用体验。

Web 组件

Vue 3.2 引入了新的 defineCustomElement 方法，可以使用 Vue 组件 API 轻松创建原生自定义元素：

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // 常规 Vue 组件选项
})

// 注册自定义元素。
// 注册完成后，此页面上的所有 `<my-vue-element>` 标签
// 都将将升级。
customElements.define('my-vue-element', MyVueElement)

此 API 允许开发者们创建由 Vue 驱动的 UI 组件库。这些库可以支持任何框架选项，甚至能够在无框架情况下正常使用。我们还在说明文档中添加了新章节，介绍如何在 Vue 中使用及创建 Web 组件。

性能改进

感谢 @basvanmeurs 的卓越贡献，3.2 版本为 Vue 的响应式系统带来了一系列重大性能改进，具体包括：

更高效的 ref 实现（读取速度提高约 260%，写入速度提高约 50%）
依赖项跟踪速度提高约 40%
内存使用量减少约 17%

模板编译器也得到一些改进：

创建普通元素 VNode 的速度提高约 200%
更为积极的连续 hoisting [1] [2]

最后，新版本提供新的 v-memo 指令，可实现对部分模板树的记忆功能。当 v-memo 命中时，不仅允许 Vue 跳过虚拟 DOM 差异、甚至可以完全跳过新 VNode 的创建步骤。另外，虽然使用频率不高，但新版本还提供紧急出口以在特定情况下（例如处理大型 v-for 列表）压榨最大性能。

通过简单的单行添加，v-memo 让 Vue 在 js-framework-benchmark 基准测试当中成为速度最快的主流框架方案：

服务器端渲染

3.2 新版本中的 @vue/server-renderer 包现在提供 ES 模块 build，而且与 Node.js 内置模块解耦。如此一来，我们就可以在非 Node.js 运行时（例如 CloudFlare Workers 或 Service Workers）当中捆绑并使用 @vue/server-renderer。我们还改进了流式渲染 API，提供用于渲染至 Web Streams API 的几种新方法。您可以查看 @vue/server-renderer 说明文档以了解更多详细信息。

Effect Scope API

3.2 版本引入了新的 Effect Scope API，用于直接控制响应式效果的计算与观察计算时间。它可以更轻松地在组件上下文之外使用 Vue 的响应式 API，同时也在组件之内解锁了多种高级用例。

这是一个主要面向库作者的底层 API，感兴趣的朋友请参阅这项功能的 RFC 以了解其作用定位与实际用例。

关于 3.2 版本中全部变更的详细清单，请参阅完整的变更日志。

原文链接：https://blog.vuejs.org/posts/vue-3.2.html


推荐阅读:入门: 最全的零基础学Python的问题  | 零基础学了8个月的Python  | 实战项目 |学Python就是这条捷径干货:爬取豆瓣短评，电影《后来的我们》 | 38年NBA最佳球员分析 |   从万众期待到口碑扑街！唐探3令人失望  | 笑看新倚天屠龙记 | 灯谜答题王 ｜用Python做个海量小姐姐素描图 ｜碟中谍这么火，我用机器学习做个迷你推荐系统电影趣味:弹球游戏  | 九宫格  | 漂亮的花 | 两百行Python《天天酷跑》游戏!AI: 会做诗的机器人 | 给图片上色 | 预测收入 | 碟中谍这么火，我用机器学习做个迷你推荐系统电影小工具: Pdf转Word，轻松搞定表格和水印！ | 一键把html网页保存为pdf！|  再见PDF提取收费！ | 用90行代码打造最强PDF转换器，word、PPT、excel、markdown、html一键转换 | 制作一款钉钉低价机票提示器！ ｜60行代码做了一个语音壁纸切换器天天看小姐姐！｜年度爆款文案1).卧槽！Pdf转Word用Python轻松搞定！2).学Python真香！我用100行代码做了个网站，帮人PS旅行图片，赚个鸡腿吃3).首播过亿，火爆全网，我分析了《乘风破浪的姐姐》，发现了这些秘密 4).80行代码！用Python做一个哆来A梦分身 5).你必须掌握的20个python代码，短小精悍，用处无穷 6).30个Python奇淫技巧集 7).我总结的80页《菜鸟学Python精选干货.pdf》,都是干货 8).再见Python！我要学Go了！2500字深度分析！9).发现一个舔狗福利！这个Python爬虫神器太爽了，自动下载妹子图片
点阅读原文,领AI全套资料！