Vue 3.2 官宣,已正式发布!

简介: Vue 3.2 版本包括许多重要的新功能和性能改进,但并不包含重大更改。新的单文件组件功能:<script setup> 是一种编译时语法糖,可在 SFC 内使用 Composition API 时极大地提升工作效率。<style> v-bind 在 SFC 标签中启用组件状态驱动的动态 CSS 值。<style>一起使用这两个新功能的示例组件:

Vue 3.2 版本包括许多重要的新功能和性能改进,但并不包含重大更改。

新的单文件组件功能:

53.jpg

一起使用这两个新功能的示例组件:

<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>

网络组件
Vue 3.2 引入了一种使用 Vue 组件 API 轻松创建原生自定义元素的新方法:defineCustomElement

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 组件的新部分。

性能改进
由于 @basvanmeurs 的出色工作,3.2 对 Vue 的反应性系统进行了一些重大的性能改进。具体如下:

更高效的 ref 实现(约 260% 的读取速度/约 50% 的写入速度)
约 40% 更快的依赖跟踪
内存使用量减少约 17%
模板编译器也得到了一些改进:

创建普通元素 VNode 的速度提高了约 200%
更激进的持续提升 [1] [2]
最后,有一个新的 v-memo 指令,它提供了记忆模板树的一部分的能力。命中允许 Vue 不仅跳过虚拟 DOM 差异,而且完全跳过新 VNode 的创建。虽然很少需要,但它提供了一个逃生舱来在某些情况下挤出最大性能,例如大型列表. v-memo v-for

使用单行添加,让 Vue 成为 js-framework-benchmark:v-memo 中最快的主流框架 v-memo

服务端渲染
3.2 中的包现在提供了一个 ES 模块构建,它也与 Node.js 内置模块分离。这使得捆绑和利用非 Node.js 运行时(例如 CloudFlare Workers 或 Service Workers)成为可能。@vue/server-renderer @vue/server-renderer

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

效果范围 API
3.2 引入了一个新的 Effect Scope API,用于直接控制反应性效果(计算和观察者)的处理时间。它可以更轻松地在组件上下文之外利用 Vue 的响应式 API,并且还解锁了组件内部的一些高级用例。

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

如果你想开发小程序或者app的话,可以通过第三方专业开发平台,来帮助你实现开发需求:厦门在乎科技-专注小程序开发、厦门app定制开发、网站开发

相关文章
|
4天前
|
JavaScript 前端开发
在Vue2或Vue3中项目中使用 Isotope(同位素) 过滤和排序神奇的布局神器,全网独家实现!
本文介绍了在Vue2或Vue3项目中如何使用Isotope(同位素)布局库来创建动态的网格布局,并提供了详细的代码实现和效果展示,包括过滤和排序功能。
10 0
在Vue2或Vue3中项目中使用 Isotope(同位素) 过滤和排序神奇的布局神器,全网独家实现!
|
4天前
|
JavaScript
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
22 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
|
4天前
|
前端开发 JavaScript API
基于Vue3+Hooks实现4位随机数和60秒倒计时
本文介绍了如何在Vue3中使用Hooks API来实现生成4位随机数和执行60秒倒计时的功能,并提供了详细的代码示例和运行效果展示。
21 1
基于Vue3+Hooks实现4位随机数和60秒倒计时
|
4天前
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
32 1
Vue3项目使用G6可视化组件实现一个树形机构图
|
3天前
|
JavaScript 算法 API
Vue 3有哪些新特性
【8月更文挑战第16天】Vue 3有哪些新特性
20 1
|
4天前
|
JavaScript
基于Vue3实现简约型侧边栏
本文介绍了如何在Vue3项目中实现一个简约型侧边栏导航,包括配置路由、页面布局和导航交互,以及如何通过Vue Router和条件渲染实现动态内容展示。
26 1
|
4天前
|
JavaScript UED
如何在Vue3项目中使用防抖节流技巧
在Vue 3项目中使用防抖和节流技巧以优化组件性能,包括使用`lodash`库和自定义实现这两种方法。
8 0
如何在Vue3项目中使用防抖节流技巧
|
4天前
|
前端开发 JavaScript
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
本文介绍了如何在Vue3项目中实现一个鼠标拖动调整元素宽度的功能,并展示了点击按钮收起或展开侧边栏的效果,提供了完整的实现代码和操作演示。
45 0
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
|
4天前
在 Vue3 + ElementPlus 项目中使用 el-autocomplete 控件
本文介绍了在Vue3 + ElementPlus项目中如何使用`el-autocomplete`控件实现自动补全输入功能,并探讨了不同版本ElementPlus中`clearable`属性的兼容性问题。
20 0
在 Vue3 + ElementPlus 项目中使用 el-autocomplete 控件
|
4天前
Vue3使用createVNode和render函数实现仿 Antd 加载动效
本文展示了如何在Vue3项目中使用`createVNode`和`render`函数实现一个仿Ant Design加载动效的自定义组件,并提供了详细的实现代码和使用示例。
8 0
Vue3使用createVNode和render函数实现仿 Antd 加载动效