8 月 5 日,Vue.js 作者尤雨溪在博客上宣布 Vue.js 3.2 版本正式发布。本文为相关内容的中文翻译。
在这里,我们高兴地宣布 Vue.js 3.2 正式发布!此版本包含一系列重要的新功能与性能改进,但并不涉及任何重大变更。
关于单文件组件(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 的使用体验。
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 说明文档以了解更多详细信息。
3.2 版本引入了新的 Effect Scope API,用于直接控制响应式效果的计算与观察计算时间。它可以更轻松地在组件上下文之外使用 Vue 的响应式 API,同时也在组件之内解锁了多种高级用例。
这是一个主要面向库作者的底层 API,感兴趣的朋友请参阅这项功能的 RFC 以了解其作用定位与实际用例。
关于 3.2 版本中全部变更的详细清单,请参阅完整的变更日志。
原文链接:https://blog.vuejs.org/posts/vue-3.2.html
文章评论