请选择 进入手机版 | 继续访问电脑版

VueJs 3 前端开发学习

 找回密码
 加入学习
搜索
热搜: 活动 交友 discuz
查看: 215|回复: 0

Vue 3.2正式版发布

[复制链接]

23

主题

25

帖子

113

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
113
发表于 2021-8-17 15:54:22 | 显示全部楼层 |阅读模式
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 值。

下面来看示例组件如何协同使用这两项新功能:
  1. <script setup>
  2. import { ref } from 'vue'

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

  5. <template>
  6.   <button @click="color = color === 'red' ? 'green' : 'red'">
  7.     Color is: {{ color }}
  8.   </button>
  9. </template>

  10. <style scoped>
  11. button {
  12.   color: v-bind(color);
  13. }
  14. </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 轻松创建原生自定义元素:
  1. import { defineCustomElement } from 'vue'

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

  5. // 注册自定义元素。
  6. // 注册完成后,此页面上的所有 `<my-vue-element>` 标签
  7. // 都将将升级。
  8. 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 版本中全部变更的详细清单,请参阅完整的变更日志。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 加入学习

本版积分规则

QQ|Archiver|手机版|小黑屋|vue3

GMT+8, 2021-10-17 00:01 , Processed in 0.044298 second(s), 30 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表