vue 3.0 正式版_Vuejs 3 Release:One Piece. Vuejs 3.0 正式版发布!代号:海贼王

f735b74a1de899c30e87d50c6d1d93ff.png
Vuejs 3.0 在北京时间2020年9月19日凌晨,终于发布了 3.0 版本,代号:One Piece。此次vue3.0 为用户提供了全新的 composition-api 以及更小的包大小,和更好的 TypeScript 支持。
Vue3.0发布链接​github.com

Vue 是当前非常流行的框架,Vue3.0更是酝酿了2年多的时间,经过2600多次commit,600多次PR,中间也发布了很多beta版本。终于在经过尤大神和社区的共同努力下,Vue3.0带着全新的 composition-api 正式发布了。

一起发布的新特性还有

Teleport 组件​v3.vuejs.orgTreeshaking的全新API​v3.vuejs.orgVue.js​v3.vuejs.org
6cf89d1891740f8d05d08f589cefe397.png

有兴趣也可以观看尤大神在19号凌晨发布的视频

直播中尤大神也讲诉了整个Vue3.0 的历程,同时也介绍了一些新的特性。

0b4e2c63974c71f1643de99ccc79bde6.png

e2320d0a24dcf04cc987e784c23845a0.png

98530bb17d4ca98ba2a9451c9809638b.png

另外,所有的官方生态库和工具,例如vue-cli、vue-router、vuex、Vue-Test-utils、vue devtools、VSCode插件Vetur,现在都支持Vue3,但大多数仍然处于beta状态,并在NPM的"next"标签目录下发布。

官方计划在2020年年底之前稳定所有项目并将其转换为使用"latest"标签。

官方发布的推文

2b59d0e36cffca83af69dca7184537ef.png

Vue 3.0 正式版发布

b4c1ebdfcd5de7b5753b6c58dbb5bc9e.png

以下为 Vuejs Release 3.0 翻译文章
译文来源: 印记中文
原文出处:v3.0.0 One Piece。

今天,我们非常自豪地宣布 Vue.js 3.0 “One Piece” 发布。本次主版本更新包含性能的改进,更小的 bundle 体积,对 TypeScript 更好的支持,用于处理大规模用例的全新 API,以及为框架未来的长期迭代奠定了夯实的基础。

3.0 的发布意味着两年多以来的努力,其中包含 30+ RFC[1],2600+ commits,99 位贡献者[2]所提交的 628 个 PR[3],还有许多除核心仓库以外的开发及文档编写工作。在此对 Vue 团队成员表示最深切的感谢,感谢贡献者们提交的 PR,感谢赞助商和 sponsors[4] 的资金支持,感谢广大社区成员参与预发布版本的设计与谈论,并提供反馈。Vue 是一个独立项目,为社区建立,也由社区维护,没有大家的鼎立支持,Vue 3.0 是不可能实现的。

进一步推进 “渐进式框架” 概念
Vue 从开始就有一个简单的使命:成为任何人都能快速学习且平易近人的框架。随着我们用户群体的增长,框架的应用范围也在不断扩大,以适应不断迭代的需求。随着时间的流逝,它演变成了 “渐进式框架”:一个可以逐步学习和采用的框架,同时为用户提供持续支持,以应对越来越多的苛刻场景。

时至今日,我们在全球拥有 130 多万的用户,我们看到 Vue 被应用于各种不同的场景中的可能,从在传统的服务端渲染页面之上添加交互,到拥有数百个组件的完整单页应用。Vue 3.0 将这种灵活性进一步提升。

分离内部模块

Vue 3.0 核心仍然通过一个简单的 <script>标签来使用,但其内部结构已经被重写,并解耦成一个个模块的集合[5]。新的架构下为源码提供了更好的可维护性,并允许终端用户通过 tree-shaking 的形式将减少一半的运行时体积。

这些模块还暴露了底层 API,解锁了许多高级用法:

编译器支持自定义 AST 转换,用于在构建时自定义(如,在构建时进行 i18n 操作[6]
核心运行时提供了一系列 API,用于针对不同渲染目标(如 native moile[7]WebGL[8]终端[9])的自定义容器。默认的 DOM 渲染器也使用这系列 API 构建。@vue/reactivity 模块[10]导出的功能,可以直接访问 Vue 的响应式系统。并且可以作为一个独立的包进行使用。它可以与其他模块解决方案配对使用(如 lit-html[11]),甚至是在非 UI 场景中使用。

用于解决规模问题的全新 API

在 Vue 3.0 中,基于对象的 2.x API 基本没有变化,并引入了 Composition API[12] — 一套全新的 API,旨在解决 Vue 在大规模应用场景中的痛点。Composition API 构建于响应式 API 之上,实现了类似于 React hook 的逻辑组成与复用,相较于 2.x 基于对象的 API 方式来说,拥有更加灵活的代码组织模式,以及更为可靠的类型推断能力。

Composition API 同时还提供了适用于 Vue 2.x 的版本,可通过 @vue/composition-api[13] 插件来在项目中使用,目前已有适用于 Vue 2 和 Vue 3 的 Composition API 实用的工具库(如 vueuse[14]vue-composable[15])。

性能提升
Vue 3 与 Vue 2 相比,在 bundle 包大小方面(tree-shaking 减少了 41% 的体积),初始渲染速度方面(快了 55%),更新速度方面(快了 133%)以及内存占用方面(减少了 54%)都有着显著的性能提升[16]

在 3.0 中,我们采取了 “编译信息虚拟 DOM” 的方式:针对模板编译器进行了优化,并生成渲染函数代码,以提升静态内容的渲染性能,为绑定类型留下运行时提示,最为重要的是,模板内部的动态节点进行了扁平化处理,以减少运行时遍历的开销。因此,用户可以获得两全其美的效果,从模板中获得编译器优化后的性能,或在需要时通过手动渲染函数直接控制。

改进与 TypeScript 的兼容
Vue 3 的代码库完全采用 TypeScript 编写,自动生成、测试并构建类型声明,因此它们总为最新。Composition API 可以很好的进行类型推断。Vetur,官方推出的 VSCode 插件,现已支持对模板表达式和 props 的类型检查,同时,Vue 3 已全面支持 TSX[17]

实验特性

我们为单文件组件提出了两个新特性[18](SFC,又称为 .vue 文件):<script setup>:在 SFC 内使用 Composition API 的语法糖<style vars>:在 SFC 中支持将状态作为 CSS 变量注入到样式中
这些特性在 3.0 中均已实现且可用,但提供这些特性的目的只是为了收集反馈。在最终合并到 RFC 之前,这些特性仍是实验性的。

我们还实现了一个目前尚未编写文档的 <Suspense> 组件,它允许在初始渲染或 branch 切换时,等待嵌套的异步依赖(异步组件或带有 async setup() 组件)。我们正在与 Nuxt.js 团队一起测试和迭代此功能(Nuxt 3 正在开发中[19]),并可能会在 3.1 时完善它。

分阶段发布

Vue 3.0 的发布意味着本框架的整体准备就绪。虽然框架的一些子项目还需进一步完善才能达到稳定状态(特别是 router 以及 Vuex 与 devtools 的集成),但我们相信现在已经可以使用 Vue 3 开启全新的项目。同时,我们也鼓励库作者开始升级项目以支持 Vue 3。

查阅 Vue 3 的库指南[20],以了解框架所有子项目的详细进展。

迁移与 IE11 的支持

由于时间限制,我们推迟了迁移构建(v3 兼容 v2 的构建,以及迁移警告)和兼容 IE11 的计划,并打算在 2020 年 Q4 集中进行。因此,计划迁移现有 v2 应用或需要兼容 IE11 的用户,目前应注意限制。

下一阶段工作

对于发布后的一段时间内,我们将重点关注:

  • 迁移构建
  • 支持 IE11
  • Router 以及 Vuex 与 devtools 的集成
  • 对 Vetur 中模板类型推断的进一步改进

目前,Vue 3 及其相关子项目的文档站、github 分支以及 npm 的 dist 标签都将保持在 next 状态。这意味着 npm install vue 仍会安装 2.x 版本,而通过 npm install vue@next 将会安装 v3 版本。我们计划在 2020 年底之前将所有文档链接,分支以及 npm 标签全部切为 3.0。

与此同时,我们已开始规划 2.7 版本,这将会是 2.x 的最后一个小版本。2.7 将与 v3 进行兼容改进,并对使用 v3 中已删除/更改的 API 发出警告,以更好的帮助 3.0 的迁移升级工作。我们计划在 2021 年 Q1 进行 2.7 的工作,发布后将直接成为 LTS 版本,维护周期为 18 个月。

试用

欲了解更多关于 Vue 3.0 的信息,请查阅全新的文档站[21],如果你是 2.x 的老用户,请直接查看迁移指南章节[22]

参考资料
[1]

30+ RFC​github.com

[2]

99 位贡献者​github.com

[3]

vuejs/vue-next​github.com
bc79261e2af00b1026748931d21b8dc6.png

[4]

vuejs/vue​github.com
bc79261e2af00b1026748931d21b8dc6.png

[5]

解耦成一个个模块的集合​github.com

[6]

在构建时进行 i18n 操作​github.com

[7]

native moile​github.com

[8]

Planning-nl/vugel​github.com
1b946bf1005c045faa149c2111050619.png

[9]

终端​github.com

[10]

vuejs/vue-next​github.com
bc79261e2af00b1026748931d21b8dc6.png

[11]

lit-html​github.com

[12]

Composition API​v3.vuejs.org

[13]

@vue/composition-api​github.com

[14]

vueuse​github.com

[15]

vue-composable​github.com

[16]

显著的性能提升​docs.google.com

[17]

vuejs/vue-next​github.com
bc79261e2af00b1026748931d21b8dc6.png

[18]

两个新特性​github.com

[19]

Nuxt 3 正在开发中​nuxtjs.slides.com

[20]

Introduction | Vue.js​v3.vuejs.org

[21]

全新的文档站​v3.vuejs.org

[22]

迁移指南章节​v3.vuejs.org

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/298042.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux IPC实践(6) --System V消息队列(3)

消息队列综合案例 消息队列实现回射客户/服务器 server进程接收时, 指定msgtyp为0, 从队首不断接收消息 server进程发送时, 将mtype指定为接收到的client进程的pid client进程发送的时候, mtype指定为自己进程的pid client进程接收时, 需要将msgtyp指定为自己进程的pid, 只接收…

100斤的铁和100斤女生哪个重?

1 你是不是有别的猫了&#xff1f;-2 兔兔这么可爱我们沾点孜然再吃会更香3 解压的最好方式4 人不如猫系列5 这演技没sei了&#xff01;&#xff01;&#xff01;6 100斤的铁和100斤女生哪个重&#xff1f;7 如果只能选一个&#xff0c;你会选什么你点的每个赞&#xff…

JailbreakMe.com-最新浏览器模式破解iPhones,iPads和iPod Touches方法

一位***建立了该网站(JailbreakMe.com)&#xff0c;可以通过浏览器登录的形式破解几乎所有的iOS&#xff0c;这包括了iPhone,iPad,和iPod Touch&#xff0c;将解除Apple对这些设备的软件限制。 用户如果想尝试未经授权的app或者想在多个不同国家使用这些设备&#xff0c;都可以…

谷歌开源3D舞蹈生成模型FACT,舞姿清奇!

文 | 御坂弟弟出品 | OSC开源社区&#xff08;ID&#xff1a;oschina2013&#xff09;谷歌开源了其基于 AIST 的 3D 舞蹈生成模型 FACT。该模型不仅可以学习音乐-运动对应关系&#xff0c;还可以生成以音乐为基础的 3D 运动序列。此前&#xff0c;谷歌层发布了大规模的多模态 3…

vue click事件_vue指令用法

vue指令指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联&#xff0c;当表达式的值改变时&#xff0c;响应式地作用在视图解决大胡子语法闪烁案例[v-cloak] {dispaly: none; }一般把v-cloak绑在Vue实例el属性绑定的节点上<!DOCTYPE html> <htm…

冒泡排序c java c,冒泡排序,c语言冒泡排序法代码

冒泡排序&#xff0c;c语言冒泡排序法代码冒泡排序冒泡排序(Bubble Sort)&#xff0c;是一种计算机科学领域的较简单的排序算法。它重复地走访过要排序的元素列&#xff0c;依次比较两个相邻的元素&#xff0c;如果顺序(如从大到小、首字母从Z到A)错误就把他们交换过来。走访元…

男人从小到大的梦想

1 哪个男孩子不想拥有挖掘机呢2 竟然还有这种操作&#xff1f;&#xff1f;&#xff1f;3 这难道是传说中的好冷鸭 哈哈哈4 这些。。都是我的吗&#xff1f;&#xff1f;&#xff01;&#xff01;5 流浪的小可爱被收养之后&#xff0c;终于可以睡个安稳觉了&#xff01;6 好好的…

10个人里有几个大学生?

大家好&#xff0c;我是Z哥。昨天看了一份报告&#xff0c;感触特别深&#xff0c;想随便聊几句。留给未来作为父亲时的自己。前几天教育部发布了 2020 年的《教育发展统计公报》&#xff0c;看着里面的一张张图表&#xff0c;不由得感叹一句&#xff0c;“读书这事真的是快内卷…

win2003无法进入桌面_救急,如何通过命令行备份桌面重要文件?

今天要说的问题&#xff0c;日常使用中还蛮常见的&#xff0c;比如出现紧急:近期系统更新后进不了系统的一定要看!中类似的情况。对于具有U盘启动盘的朋友们来说&#xff0c;这不是事&#xff0c;因为我们可以通过U盘启动进PE来备份数据&#xff0c;但是日常中&#xff0c;大部…

操作系统概念 ppt_智能家居操作系统三国拉锯,要出结果了吗?

海尔、百度、华为盘踞的智能家居操作系统&#xff0c;谁拿下传统家电企业了&#xff1f;文/郭锴来源/智能相对论(aixdlun)福特曾说&#xff0c;如果你问消费者他们想要什么&#xff0c;得到的答案只会是一匹更快的马。汽车大王福特给消费者了汽车&#xff0c;手机教父乔布斯拿出…

垃圾站

http://www.heiqu.com/

史上超强的学科碰撞,有生之年必看系列!

▲ 点击查看 马云在一次演讲中&#xff0c;说过这样一段话&#xff1a;现今社会&#xff0c;如果我们继续以前的教学方法对我们的孩子进行记、背、算这些东西&#xff0c;不让孩子去体验&#xff0c;去玩&#xff0c;不让他们去尝试琴棋书画。我可以保证&#xff1a;三十年后孩…

使用zipKin构建NetCore分布式链路跟踪

本文主要讲解使用ZipKin构建NetCore分布式链路跟踪场景因为最近公司业务量增加&#xff0c;而项目也需要增大部署数量&#xff0c;K8S中Pod基本都扩容了一倍&#xff0c;新增了若干物理机&#xff0c;部分物理机网络通信存在问题&#xff0c;导致部分请求打入有问题的物理机时总…

微信又添新功能!这个微信群可以学英语,而且全程免费

全世界只有3.14 % 的人关注了爆炸吧知识最近不少网友发现&#xff0c;在微信群里居然可以学英语&#xff01;而且全程免费&#xff01;群里面会有免费的英语直播课&#xff0c;免费的课程资料&#xff0c;还有专业的英语老师辅导学习。 更重要的是&#xff0c;不需要集赞&#…

C# winform 窗体接收命令行参数自动登录进行系统,模拟600个WCF客户端的并发压力测试...

我们想要达到的目的是模拟&#xff16;&#xff10;&#xff10;个客户端的消息提醒功能&#xff0c;当然我们没有&#xff16;&#xff10;&#xff10;个电脑可以拿来测试&#xff0c;我们只有&#xff14;&#xff0d;&#xff15;台电脑可以用来测试&#xff0c;那我们就想…

UpdatePanel的用法

UpdatePanel控件也是Ajax里用得最多的控件之中的一个&#xff0c;UpdatePanel控件是用来局部更新网页上的内容&#xff0c;网页上要局部更新的内容必须放在UpdatePanel控件里&#xff0c;他必须和上一次说的ScriptManager控件一起使用。如今来看UpdatePanel的属性UpdatePanel重…

JMeter压测笔记

每个资深测试工程师&#xff0c;必须掌握的测试工具&#xff0c;熟练使用Jmeter能大大提高工作效率。熟练使用Jmeter后&#xff0c; 能用Jmeter搞定的事情&#xff0c;你就不会使用LoadRunner了。Jmeter 是一款使用Java开发的&#xff0c;开源免费的&#xff0c;测试工具&#…

系统同传软件_如何戴耳机录制自己的同传练习?

在学校上课的话&#xff0c;有同传实验室的模拟会议系统可以完成同传的录制&#xff0c;但是自己的练习的时候就会出现录制的问题。曾经在一次导专课上遇到过这种尴尬&#xff0c;由于需要将自己的同传练习录音分享给老师和同学听&#xff0c;所以就要把源语和译入语都录制下来…

颜宁课题组再发Cell!1个月时间内4篇顶刊!

全世界只有3.14 % 的人关注了爆炸吧知识本文来源&#xff1a;iNature&#xff08;作者&#xff1a;枫叶&#xff09;、微博转自&#xff1a;募格学术6月15日晚&#xff0c;颜宁团队和新南威尔士大学杨洪远团队合作&#xff0c;在Cell 《细胞》在线发表了题为“Structural Basis…

BOOST 线程完全攻略 - 结束语

2019独角兽企业重金招聘Python工程师标准>>> 全文介绍了3个boost::thread的扩展类&#xff0c;希望能给大家书写多线程代码带来便捷。 thread -> controlled_module_ex ->controlled_module 那么我们具体在什么情况下选用不同的扩展类呢&#xff1f; 1.如果你…