Vue 3 正式发布

来源: OSCHINA
编辑: 局长
2020-09-19

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

3.0 版本的开发周期长达两年多,期间产生了 30+ RFCs2600+ commits628 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 实用程序库(例如 vueusevue-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 文件提供了两项新特性:

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

此外还实现了一个当前未记录的<Suspense>组件,该组件允许在初始渲染或分支切换时等待嵌套的异步依赖项(异步组件或包含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

展开阅读全文
19 收藏
分享
加载中
精彩评论
后端开发人员,喜欢把js和html合并一起,再封装成组件,组件复用,这就是react。
前端开发人员,喜欢把js,html清晰的分开。这就是vue
2020-09-20 06:56
10
举报
支持支持,安排学习 。
2020-09-19 08:07
9
举报
项目应该使用 react 和 angular,vue 3 再发育两年看看吧。
2020-09-19 10:58
8
举报
老实说很多人说vue比react易学,我是真没感觉出来。而且从内在集成特性上来看,vue里面的集成要比react还多,怎么vue就容易学了。
2020-09-19 16:22
5
举报
阿里那帮前端不是很牛么?居然连Vue这种框架都开发不出来,只能去捧React.
2020-09-19 16:15
5
举报
最新评论 (58)
中国人写的框架,为什么先写英文文档呢,大神们,这是为啥!!
2020-09-29 11:59
0
回复
举报
知乎上的问题
为什么vue的更新记录不能有中文,中文文档也一直滞后?
尤雨溪亲自回复: 为啥我要牺牲陪老婆孩子的时间来替你省学英语的时间?

你以为有中文文档是vue 的优势,但是创作他的人并不这么认为哦
2020-09-29 13:15
1
回复
举报
这是工具,好用就用。尤大是尤大,我们是我们。
2020-09-29 22:46
0
回复
举报
关键是 文档首先用英文还是中文写 的区别吧。

如果先用中文写的,为啥我要牺牲陪老婆孩子的时间来替 老外 省学 中文 的时间?
因为不写英文的,老外就不用了
2020-09-30 02:34
1
回复
举报
因为定位准确
2020-09-29 18:12
1
回复
举报
招聘了一个月前端,101% 的应聘者是 Vue 的重度使用者,有 React 开发经验的凤毛麟角。
2020-09-29 10:59
0
回复
举报
@keep_wan不黑php又不会长痔疮。
2020-09-29 08:57
0
回复
举报
我真的学不动了
2020-09-21 14:25
2
回复
举报
感觉我们公司的项目并不会升级3.0
2020-09-20 21:22
0
回复
举报
是啊 迁移得多花多少时间人力金钱,成本是最大考量,当然自己玩玩可以,小项目可以试着用用
2020-09-24 13:17
1
回复
举报
所以框架的稳定性、兼容性很重要!
2020-09-28 12:05
0
回复
举报
插眼。。。
2020-09-19 23:32
0
回复
举报
老实说很多人说vue比react易学,我是真没感觉出来。而且从内在集成特性上来看,vue里面的集成要比react还多,怎么vue就容易学了。
2020-09-19 16:22
5
回复
举报
入门容易吧
2020-09-19 21:27
1
回复
举报
主要是直接在html里面引用,基本一看就会,造成非前端学这个觉得容易,真的深入使用,难易程度差不多,react顺应了它的逻辑用的更嗨点
2020-09-19 22:23
1
回复
举报
react可选择的组合太多了,让人感觉反而觉得不知道学些什么了
2020-09-19 23:03
0
回复
举报
后端开发人员,喜欢把js和html合并一起,再封装成组件,组件复用,这就是react。
前端开发人员,喜欢把js,html清晰的分开。这就是vue
2020-09-20 06:56
10
回复
举报
说反了吧
2020-09-29 08:55
4
回复
举报
搞笑,你用过vue么
2020-12-12 21:23
0
回复
举报
Vue 可以被称为渐进式 JavaScript 框架的一个重要原因是:所有 Vue.js 的模板都是合法的 HTML。
事实上 Vue 也提供了渲染函数,甚至支持 JSX。然而,我们默认推荐的还是模板。任何合乎规范的 HTML 都是合法的 Vue 模板,这也带来了一些特有的优势:
对于很多习惯了 HTML 的开发者来说,模板比起 JSX 读写起来更自然。这里当然有主观偏好的成分,但如果这种区别会导致开发效率的提升,那么它就有客观的价值存在。
基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。
这也使得设计师和新人开发者更容易理解和参与到项目中。
你甚至可以使用其他模板预处理器,比如 Pug 来书写 Vue 的模板。
https://cn.vuejs.org/v2/guide/comparison.html#HTML-amp-CSS
2020-09-20 13:02
2
回复
举报
用java的人说java易学,用react的人说react易学,会vue的vue易学。
2020-09-28 14:05
2
回复
举报
我刚开始就以为Vue好学,先学的Vue,但是没学懂,后来学React感觉比较容易。可能是由于有了Vue的了解,但个人觉得更是因为React的学习点比Vue少的多。掌握一门就好了
2020-09-28 14:18
0
回复
举报
react响应式远没有vue好上手,vue数据响应方面比较符合直觉。
2020-09-28 16:31
0
回复
举报
阿里那帮前端不是很牛么?居然连Vue这种框架都开发不出来,只能去捧React.
2020-09-19 16:15
5
回复
举报
千万不能让阿里碰任何东西,都会过一段时间放弃
2020-09-20 12:13
1
回复
举报
不是他们不会开发哦,只是开发了都是内部使用,不开源你不知道而已
2020-09-20 19:23
2
回复
举报
对啊 eechen大佬难道不知道这个问题么?难道阿里的东西都开源出来了的?
2020-09-20 22:30
2
回复
举报
支持
2020-09-19 12:15
0
回复
举报
终于发不了,马上会有3.0.1吗,哈哈
2020-09-19 12:00
1
回复
举报
更多评论
65 评论
19 收藏
分享
返回顶部
顶部