好消息,vue3.0 进入 beta 阶段!
昨天,4 月 16 日,vue 3 正式进入 beta 阶段。同日,尤大参加了 State of Vue 的线上活动,以下是他上传到 google docs 上的 slides
:
可以 FQ 的同学可以直接看。如果不方便的话,可以继续往下看一下:
vue 3 核心的进度情况
进入 Beta 阶段意味着什么?
- All planned RFCs merged & implemented
- Focus is now on stability and library integrations
目前,所有被列入计划的 RFCs 已经实现了,接下来 Vue 团队的重点是让 Vue 3 变得更加稳定,以及让 vue 相关的第三方库支持 vue 3。
3.0 对比 2.x 有哪些重要变更?
- Performance
- Tree-shaking support
- Composition API
- Fragment, Teleport, Suspense
- Better TypeScript support
- Custom Renderer API
主要体现在 性能
、Tree-shaking support
、Composition API
、 Fragment
、TypeScript支持度
和 自定义 Render
上。
性能
- Rewritten virtual dom implementation
- Compiler-informed fast paths
- More efficient component initialization
- 1.3~2x better update performance*
- 2~3x faster SSR*
性能上,主要是 重写了Vdom , compiler-informed fast paths(编译模板的优化?), 以及实现了更加高效的组件初始化。
Tree-shaking support
- Most optional features (e.g. v-model, ) are now tree-shakable
- Bare-bone HelloWorld size: 13.5kb
- 11.75kb with only Composition API support
- All runtime features included: 22.5kb
- More features but still lighter than Vue 2
这部分的优化主要是减少了 vue 的打包体积。很多时候,我们的应用并不是需要 vue 提供的所有功能的,在 vue 2 我们没有很好的办法把这些不想要的功能排除掉,但是 3.0 我们就做成了按需引入。举例来说,内置组件像 keep-alive、transition,指令的配合的运行时比如 v-model、v-for 等都可以按需引入 。这样就可以让纯净的 vue 的体积变得更小了。
Composition API
- Usable alongside existing Options API
- Flexible logic composition and reuse
- Reactivity module can be used as a standalone library
Composition API 是和 React Hooks 类似的东西,他们的主要作用是提高了代码逻辑的可复用性,从而实现了与模板无关性。另外,把 Reactivity 模块独立开来,意味着 vue 3 的响应式模块可以和其他框架组合。之前昊神就发过一篇文章 40行代码把Vue3的响应式集成进React做状态管理 有兴趣的可以去看一下。
Fragments
- No longer limited to a single root node in templates
- Manual render functions can simply return Arrays
- “Just works”
不再限制 tmeplate 里面只有一个根节点了,render 函数也可以返回数组了,有点类似实现了 React.Fragments
的功能 。
<Teleport>
- Previously known as
- More details to be shared by @Linusborg
<Suspense>
- Wait on nested async dependencies in a nested tree
- Works with async setup()
- Works with Async Components
Better TypeScript Support
- Codebase written in TS w/ auto-generated type definitions
- API is the same in JS and TS
- In fact, code will also be largely the same
- TSX support
- Class component is still supported (vue-class-component@next is currently in alpha)
对 TS 及 TSX的支持度更加友好了。类组件还会继续支持,但是需要引入 vue-class-component@next
,该模块目前还处在 alpha 阶段。
Custom Renderer API
- NativeScript Vue integration underway by @rigor789
- Users already experimenting w/ WebGL custom renderer that can be used alongside a normal Vue application (Vugel)
这是个振奋人心的消息,意味着以后我们可以通过 vue ,实现用 dom 编程的方式来进行 webgl 编程 。感兴趣可以看这里:Getting started vugel
vue 3 生态的进度情况
文档和迁移指引进度
- New Docs under heavy work by @NataliaTepluhina, @sdras, @bencodezen & @phanan
- @sdras starting to work on Migration Guide
- @sodatea has started working on CodeMods
vue-router
- vue-router@next is currently in alpha, thanks to work by @posva
Vuex
- vuex@next (same API but with Vue 3 compat) currently in alpha, thanks to work by @KiaKing
- Team is experimenting with Vuex API simplification for the next iteration
vue-cli
- Experimental Support via vue-cli-plugin-vue-next by @sodatea
- (wip) CodeMods support for upgrading Vue 2 applications
vue-test-utils
- test-utils@next being worked on by @lmiller1990, @dobromir-hristov, @afontcu & @JessicaSachs
DevTools
- Early prototype already working by @Akryum, full integration will be worked on as we reach beta
IDE Support (Vetur)
- @znck currently experimenting with Type checking for templates
- @octref will be working on Vetur integration for Vue 3 in May
Nuxt
- Nuxt team is working on Vue 3 integration and already has working prototype.
What About 2.x?
- There will be one last minor release (2.7)
- Backporting compatible improvements from 3.0
- Deprecation warnings for features removed in 3.0
- LTS for 18 months
可见,vue 2 并没有过时, 还会有小更新,并且还会维护 18 个月。
总结
虽然 vue 3 已经进入 beta 阶段,但是距离能应用到生产环境还是有很长的路要走,最起码,在 2020 年 继续使用 vue 2 也不会过时,最主要的原因是 vue 3 生态还没有完善。就像 python3 出来那么久了,现在还有很多人使用 python2 一样,因为还有很多 python 的库不兼容 python3 的。
好消息,vue3.0 进入 beta 阶段!的更多相关文章
- 通过10个实例小练习,快速熟练 Vue3.0 核心新特性
Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了. GitHub 博客地址: https://github.com/biaochenxuying ...
- Beta阶段冲刺2.0
1. 提供当天站立式会议照片一张 2. 每个人的工作 (有work item 的ID) 成员 昨天已完成的工作 今天计划完成的工作 工作中遇到的困难 具体贡献 郑晓丽 "我的活动详情&quo ...
- Vue3实战系列:Vue3.0 + Vant3.0 搭建种子项目
最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何使用 Vue3 ...
- 2016福州大学软件工程Beta阶段团队作业成绩汇总
1.评分规则 本次Beta阶段团队作业评分方法如下: 团队得分=[[7次scrum过程评分+(小组互评得分+教师评分)/2]/2],其中过程.小组.教师各30分 说明:由于没有规定提交团队贡献比,因此 ...
- 【Beta阶段】团队源代码管理
0. 快速上手与理解 如果你的团队来了一个新队员,有一台全新的机器,你们是否有一个文档,只要设置了相应的权限,她就可以根据文档,从头开始搭建环境,并成功地把最新.最稳定版本的软件编译出来,并运行必要的 ...
- 团队作业8——第二次项目冲刺(Beta阶段)
Deadline: 2017-5-28 22:00PM,以博客发表日期为准 评分基准: 按时交 - 有分,检查的项目包括后文的三个个方面 冲刺计划安排(单独1篇博客) 七天的敏捷冲刺(每天发布1篇,共 ...
- 【集美大学1411_助教博客】团队作业8——第二次项目冲刺(Beta阶段)
写在前面的话 此次团队作业8可以拆分成两部分:1.beta阶段冲刺计划安排,2.7天敏捷冲刺."我们很低调"没有使用leangoo,经过与张老师的商议,张老师同意他们不使用lean ...
- 集美大学网络1413第十三次作业成绩(团队八) -- 第二次项目冲刺(Beta阶段)
题目: 团队作业8--第二次项目冲刺(Beta阶段) 团队作业8-成绩: 团队/分值 新加入成员 角色 技术特点 改善的功能. 原因. bug 新增功能. 方法. 如何实现 团队分工改进. 原因 改 ...
- 【1414软工助教】团队作业8——第二次项目冲刺(Beta阶段) 得分榜
题目 团队作业8--第二次项目冲刺(Beta阶段) 往期成绩 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目2:单元测试 团队作业1:团队展示 团队作业2:需求分析&a ...
随机推荐
- Flask wtforms 表单验证使用
目录 wtforms 使用1(简单版): 使用2(复杂版): wtforms 安装:pip3 install wtforms 使用1(简单版): from flask import Flask, re ...
- 【Weiss】【第03章】练习3.25:数组模拟队列
[练习3.25] 编写实现队列的例程,使用 a.链表 b.数组 Answer: 在这章一开头就已经写了个链表的队列例程了,所以实际上只要做b小题就可以. 数组模拟队列和链表的两点小不同是: ①.数组空 ...
- (11)nc命令(每周一个linux命令)
nc(netcat)实用程序几乎可用于所有涉及TCP或UDP的事情.它可以打开TCP连接,发送UDP数据包,监听任意TCP和UDP端口,进行端口扫描,处理IPv4和IPv6.与telnet不同,nc可 ...
- 解决2020-3-27 github无法访问
早上的github无法访问了 查找资料后,发现可以修改 hosts 文件 右键 属性 将只读去掉 进行修改 其中的ip去如下地址拿 试一下,大功告成
- JS三个事件绑定方法
1. JS三个事件绑定方法 1.1. 使用html进行事件绑定 1.直接在html标签上写入事件类型和事件处理方法. <button onclick = "alert('hello w ...
- Mysql性能优化:为什么要用覆盖索引?
导读 相信读者看过很多MYSQL索引优化的文章,其中有很多优化的方法,比如最佳左前缀,覆盖索引等方法,但是你真正理解为什么要使用最佳左前缀,为什么使用覆盖索引会提升查询的效率吗? 本篇文章将从MYSQ ...
- 洛谷 P3808 【模板】AC自动机(简单版) 题解
原题链接 前置知识: 字典树.(会 \(\texttt{KMP}\) 就更好) 显然呢,本题用 字典树 和 \(\texttt{KMP}\) 无法解决问题. 所以我们发明了一个东西: \(\textt ...
- Nginx打点服务器配置
Nginx打点服务器配置 什么是打点服务器 他的作用是什么 打点服务器就是记录用户行为的服务器 单独从应用独立出来 目的就是为了减轻应用服务器压力 效果如下: 10.0.1.1 - - [05/Feb ...
- LM拟合算法
一. Levenberg-Marquardt算法 (1)y=a*e.^(-b*x)形式拟合 clear all % 计算函数f的雅克比矩阵,是解析式 syms a b y x real; f=a*e ...
- U - Inviting Friends HDU - 3244( LIS 最长升序子序列——变形 )
序列变换 Problem Description 我们有一个数列A1,A2-An,你现在要求修改数量最少的元素,使得这个数列严格递增.其中无论是修改前还是修改后,每个元素都必须是整数. 请输出最少需要 ...