百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程文章 > 正文

你期待已久的Vue 3 正式发布啦 vue3正式版发布

qiyuwang 2024-10-10 11:34 9 浏览 0 评论


Vue.js 3.0 "One Piece" 已正式发布,此框架新的主要版本提供了更好的性能、更小的捆绑包体积、更好的 TypeScript 集成、用于处理大规模用例的新 API,并为框架未来的长期迭代奠定了坚实的基础。

3.0 版本的开发周期长达两年多,期间产生了 30+ RFCs、2600+ commits、628 pull requests,以及核心仓库之外的大量开发和文档工作。

Vue 3.0 的发布标志着此框架整体上已处于可用状态。尽管框架的某些子项目可能仍需要进一步的开发才能达到稳定状态(特别是 devtools 中的路由和 Vuex 集成),不过现在仍然是开始使用 Vue 3 启动新项目的合适时机。官方还鼓励库作者现在可以开始升级项目以支持 Vue 3。查阅《Vue 3 Libraries Guide》以获取有关所有框架子项目的详细信息。

分层内部模块 (Layered internal modules)

Vue 3.0 core 仍然可以通过<script>标签进行使用,但其内部架构已被彻底重写为一组解耦的模块。新架构提供了更好的可维护性,并允许使用者通过 tree-shaking 来减少多达一半的 runtime 大小。

这些模块还将许多底层 API 暴露出来,可用于许多高级用例:

  • 编译器为定制 build-time 提供了对自定义 AST 转换的支持(例如 build-time i18n)
  • 内核 runtime 提供了优先级最高的 API,用于创建针对不同渲染目标(例如原生移动设备、WebGL 或终端)的自定义渲染器。默认 DOM 渲染器使用相同的 API 构建
  • @vue/reactivity模块导出的函数可以直接访问 Vue 的 reactivity 系统,其本身也可以作为一个独立的程序包使用。它还可以与其他模板解决方案(例如 vue-lit)搭配使用,甚至可以在非 UI 场景中使用

用于处理大规模用例的新 API

在 Vue 3 中,基于对象的 2.x API 基本没有变化。不过 3.0 还引入了 Composition API,旨在解决 Vue 在大型应用程序中的使用痛点。Composition API 构建于 reactivity API 之上,可以实现类似于 React 钩子(React hooks)的逻辑组合和重用,与 2.x 基于对象的 API 相比,拥有更灵活的代码组织模式和更可靠的类型推导。

通过 @vue/composition-api 插件,Composition API 还可以与 Vue 2.x 搭配使用,并且目前已经有适用于 Vue 2 和 3 的 Composition API 实用程序库(例如 vueuse,vue-composable)。

提升性能

与 Vue 2 相比,Vue 3 在捆绑包体积(通过 tree-shaking 减小约 41% 大小)、初始渲染(速度提升约 55%)、更新(速度提升约 133%)和内存使用率(降低约 54%)等方面有了显著的性能提升。

Vue 3 采用了"compiler-informed Virtual DOM"的方法:模板编译器执行激进的优化并生成渲染函数代码,以提升静态内容访问速度,为绑定类型留下 runtime 提示。最重要的是,将内部的动态节点扁平化处理,以降低 runtime 遍历的成本。因此,用户可以获得两全其美的效果:通过模板优化编译器的性能,或者在用例需要时通过手动渲染函数直接控制。

改进与 TypeScript 的集成

Vue 3 使用 TypeScript 编写,具有自动生成、测试和捆绑的类型定义等特性。Composition API 可与类型推导很好地搭配使用。Vetur,Vue 3 的官方 VSCode 扩展,现在支持模板表达式,以及利用 Vue 3 改进的内部类型进行 props 类型检查。

实验性功能

为单文件组件(SFC, Singe-File Components),即 .vue 文件提供了两项新特性:

  • <script setup>:用于在 SFC 中使用 Composition API 的语法糖
  • <style vars>: SFC 中状态驱动的 CSS 变量

上述已在 Vue 3.0 中实现并可用,但仅出于收集反馈的目的而提供。在合并 RFC 之前,它们将保持实验性状态。

此外还实现了一个当前未记录的组件,该组件允许在初始渲染或分支切换时等待嵌套的异步依赖项(异步组件或包含async setup()的组件)。目前正在与 Nuxt.js 团队一起测试和迭代此功能(即将在 Nuxt 3发布),并且可能会在 3.1 中到达稳定。

下一步

发布后的短期内,开发团队将专注于:

  • 版本迁移
  • 支持 IE11
  • 新 devtools 中的路由和 Vuex 集成
  • 对 Vetur 中模板类型推导的进一步改进

目前,Vue 3 和 v3-targeting 项目的文档网站、GitHub 分支和 npm dist 标签将保持 next-denoted 状态。这意味着使用npm install vue命令仍会安装 Vue 2.x,而要安装 Vue 3 需使用npm install vue@next命令。官方计划在 2020 年底前将所有的 doc 链接、分支和 dist 标签都切换为默认 3.0。

同时,团队已开始启动 2.7 的开发工作计划,这将是 2.x 的最后一个次要版本。2.7 将向后移植来自 v3 的兼容改进,并会提示有关 v3 中已删除/更改的 API 使用情况的警告。团队表示计划在 2021 年第一季度开发 2.7,发布后将直接变为 LTS 版本,具有 18 个月的维护周期。

使用

了解有关 Vue 3.0 的更多信息,访问新文档网站。如果是 Vue 2.x 用户,访问迁移指南。

详情查看: https://github.com/vuejs/vue-next/releases/tag/v3.0.0


相关推荐

# 安装打开 ubuntu-22.04.3-LTS 报错 解决方案

#安装打开ubuntu-22.04.3-LTS报错解决方案WslRegisterDistributionfailedwitherror:0x800701bcError:0x80070...

利用阿里云镜像在ubuntu上安装Docker

简介:...

如何将Ubuntu Kylin(优麒麟)19.10系统升级到20.04版本

UbuntuKylin系统使用一段时间后,有新的版本发布,如何将现有的UbuntuKylin系统升级到最新版本?可以通过下面的方法进行升级。1.先查看相关的UbuntuKylin系统版本情况。使...

Ubuntu 16.10内部代号确认为Yakkety Yak

在正式宣布Ubuntu16.04LTS(XenialXerus)的当天,Canonical创始人MarkShuttleworth还非常开心的在个人微博上宣布Ubuntu下个版本16.10的内...

如何在win11的wsl上装ubuntu(怎么在windows上安装ubuntu)

在Windows11的WSL(WindowsSubsystemforLinux)上安装Ubuntu非常简单。以下是详细的步骤:---...

Win11学院:如何在Windows 11上使用WSL安装Ubuntu

IT之家2月18日消息,科技媒体pureinfotech昨日(2月17日)发布博文,介绍了3中简便的方法,让你轻松在Windows11系统中,使用WindowsSubs...

如何查看Linux的IP地址(如何查看Linux的ip地址)

本头条号每天坚持更新原创干货技术文章,欢迎关注本头条号"Linux学习教程",公众号名称“Linux入门学习教程"。...

怎么看电脑系统?(怎么看电脑系统配置)

要查看电脑的操作系统信息,可以按照以下步骤操作,根据不同的操作系统选择对应的方法:一、Windows系统通过系统属性查看右键点击桌面上的“此电脑”(或“我的电脑”)图标,选择“属性”。在打开的...

如何查询 Linux 内核版本?这些命令一定要会!

Linux内核是操作系统的核心,负责管理硬件资源、调度进程、处理系统调用等关键任务。不同的内核版本可能支持不同的硬件特性、提供新的功能,或者修复了已知的安全漏洞。以下是查询内核版本的几个常见场景:...

深度剖析:Linux下查看系统版本与CPU架构

在Linux系统管理、维护以及软件部署的过程中,精准掌握系统版本和CPU架构是极为关键的基础操作。这些信息不仅有助于我们深入了解系统特性、判断软件兼容性,还能为后续的软件安装、性能优化提供重要依据。接...

504 错误代码解析与应对策略(504错误咋解决)

在互联网的使用过程中,用户偶尔会遭遇各种错误提示,其中504错误代码是较为常见的一种。504错误并非意味着网站被屏蔽,它实际上是指服务器在规定时间内未能从上游服务器获取响应,专业术语称为“Ga...

猎聘APP和官网崩了?回应:正对部分职位整改,临时域名可登录

10月12日,有网友反映猎聘网无法打开,猎聘APP无法登录。截至10月14日,仍有网友不断向猎聘官方微博下反映该情况,而猎聘官方微博未发布相关情况说明,只是在微博内对反映该情况的用户进行回复,“抱歉,...

域名解析的原理是什么?域名解析的流程是怎样的?

域名解析是网站正常运行的关键因素,因此网站管理者了解域名解析的原理和流程对于做好域名管理、解决常见解析问题,保障网站的正常运转十分必要。那么域名解析的原理是什么?域名解析的流程是怎样的?接下来,中科三...

Linux无法解析域名的解决办法(linux 不能解析域名)

如果由于误操作,删除了系统原有的dhcp相关设置就无法正常解析域名。  此时,需要手动修改配置文件:  /etc/resolv.conf  将域名解析服务器手动添加到配置文件中  该文件是DNS域名解...

域名劫持是什么?(域名劫持是什么)

域名劫持是互联网攻击的一种方式,通过攻击域名解析服务器(DNS),或伪造域名解析服务器(DNS)的方法,把目标网站域名解析到错误的地址从而实现用户无法访问目标网站的目的。说的直白些,域名劫持,就是把互...

取消回复欢迎 发表评论: