发布时间

Vue 3.2 发布！

作者

我们很高兴地宣布 Vue.js 3.2 "Quintessential Quintuplets" 的发布！此版本包含许多重要的新功能和性能改进，并且没有破坏性更改。

新的 SFC 功能 ​

单文件组件 (SFC，即 .vue 文件) 的两个新功能已从实验状态毕业，现在被认为是稳定的

  • <script setup> 是一种编译时语法糖，在 SFC 中使用 Composition API 时极大地提高了人体工程学。

  • <style> v-bind 允许在 SFC <style> 标签中使用组件状态驱动的动态 CSS 值。

以下是一个使用这两个新功能的示例组件

vue
<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 中试用，或阅读其各自的文档

在 <script setup> 的基础上，我们还为使用编译器启用语法糖来改进 ref 使用的人体工程学提供了一个新的 RFC - 请分享您的反馈 这里。

Web 组件 ​

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

js
import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // normal Vue component options here
})

// Register the custom element.
// After registration, all `<my-vue-element>` tags
// on the page will be upgraded.
customElements.define('my-vue-element', MyVueElement)

此 API 允许开发人员创建 Vue 驱动的 UI 组件库，这些库可以与任何框架一起使用，或者根本不使用任何框架。我们还在我们的文档中添加了一个关于 在 Vue 中使用和创建 Web 组件 的新部分。

性能改进 ​

3.2 包含对 Vue 的响应式系统的一些重大性能改进，这得益于 @basvanmeurs 的出色工作。具体来说

模板编译器也收到了一些改进

最后，有一个新的 v-memo 指令，它提供了记忆模板树一部分的能力。v-memo 命中允许 Vue 不仅跳过虚拟 DOM 差异，而且完全跳过创建新的 VNode。虽然很少需要，但它提供了一种逃生舱，可以在某些情况下挤出最大性能，例如大型 v-for 列表。

v-memo 的使用（只需添加一行代码）使 Vue 在 js-framework-benchmark 中成为最快的主流框架之一。

benchmark

服务器端渲染 ​

3.2 中的 @vue/server-renderer 包现在提供了一个 ES 模块构建，该构建也与 Node.js 内置函数分离。这使得可以捆绑和利用 @vue/server-renderer 在非 Node.js 运行时（如 CloudFlare Workers 或 Service Workers）中使用。

我们还改进了流式渲染 API，并提供了用于渲染到 Web Streams API 的新方法。查看 @vue/server-renderer 的文档 以了解更多详细信息。

Effect Scope API ​

3.2 引入了一个新的 Effect Scope API，用于直接控制响应式效果（计算属性和观察者）的处置时间。它使在组件上下文之外利用 Vue 的响应式 API 变得更加容易，并且还解锁了组件内部的一些高级用例。

这是一个低级 API，主要面向库作者，因此建议阅读该功能的 RFC 以了解该功能的动机和用例。

有关 3.2 中所有更改的详细列表，请参阅 完整变更日志。