Vue 3.2正式发布，<script setup; + TS + Volar = 真香

Posted 2021-09-06 前端开发博客

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

推荐阅读

10张脑图带你快速入门Vue3 | 附高清原图

关注下方「前端开发博客」，回复 “加群”

加入我们一起学习，天天进步

如果觉得这篇文章还不错，来个【分享、点赞、在看】三连吧，让更多的人也看到~