![[现场实录] VueConf 2019 尤雨溪演讲总结_Vue](https://s2.51cto.com/images/blog/202107/01/2be03fc3856707adfa0b7bd77840140e.jpeg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
距离参加 VueConf 第一届大会已经很久了,yubo 的介绍一如既往地有意思,是他的努力保持了大会热情的社区氛围!另一个彩蛋就是 Evan You 带了自己的亲人和孩子来到现场,真的是其乐融融!
尤雨溪 @ State of Vue
![[现场实录] VueConf 2019 尤雨溪演讲总结_Vue _02](https://s2.51cto.com/images/blog/202107/01/0877fce33f6046aa5380ad73420c81af.jpeg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
发展现状
Chrome DevTools 有约 90 万的周活用户,React 相比有 160 万。Evan 推荐用 Chrome DevTools 来预测 Vue 的项目的真实开发者数据。
Vue 有全球化的影响力,在非常多的国家有相应的活动,可以通过 events.vuejs.org 查找。State of JavaScript 2018 年统计说明在前端框架的满意度是第一名(91%),并在 Stack Overflow 的数据里体现是第二受欢迎的前端框架。
![[现场实录] VueConf 2019 尤雨溪演讲总结_Vue _03](https://s2.51cto.com/images/blog/202107/01/b73c0f366e19a9c2b23ec50a084f0421.jpeg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
![[现场实录] VueConf 2019 尤雨溪演讲总结_Vue _04](https://s2.51cto.com/images/blog/202107/01/5a7ef59d82a85934bd2dad701e6bcb30.jpeg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
团队
现在 Vue 有 20 人活跃的开发者,大部分日常工作与 Vue 相关,完全独立运营,而成本主要来自于赞助商,三年来稳步增长。蒋豪群(@sodatea)全职在维护 CLI 及相关工具链。
3.0 进展
![[现场实录] VueConf 2019 尤雨溪演讲总结_Vue _05](https://s2.51cto.com/images/blog/202107/01/6e8d1a6eafa745b8fa446cafabc5f383.jpeg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
自 2018 年年底有过预告 Vue.js 3.0 的设定目标,其实在今年年初的时候大部分功能已经实现。但同时,在开发的同是也在研究业界最新的方案,Vue 在 3.0 使用了 Proxy 的功能,但是 IE 11 仍然无法支持却有一定市场占有率。
更快
![[现场实录] VueConf 2019 尤雨溪演讲总结_Vue _06](https://s2.51cto.com/images/blog/202107/01/348f570ffdb48710bc238f84635688f2.jpeg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
![[现场实录] VueConf 2019 尤雨溪演讲总结_Vue _07](https://s2.51cto.com/images/blog/202107/01/02a0bfd22b2d04c6874b23d717f2cb0b.jpeg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
1、Object.defineProperty -> Proxy:Proxy 不需要对原始对象做太多改动,效率更高。
2、Virtual DOM 重构:组件的启动速度等比 2.5 快了一倍,生成 VNode 参数一致化。但是还是可以做的更好,Virtual DOM 的目的并非只是速度,其核心价值在于用 JavaScript 表达 DOM 状态,因此它本身其实是有成本的。即每次更新时, vdom 树需要每次都重新建立,因此传统的 vdom 是有性能瓶颈。而这背后的原因是 vdom 最早是由 JSX 写的表达逻辑(灵活性),而非是模版语言,因此不能通过模版内容推测一些信息。
![[现场实录] VueConf 2019 尤雨溪演讲总结_Vue _08](https://s2.51cto.com/images/blog/202107/01/ba5f301955ca2712aa876da3923fdd5b.jpeg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
如何最大化的动静结合?即兼容 render function 的灵活性,及模版表达的信息。
![[现场实录] VueConf 2019 尤雨溪演讲总结_Vue _09](https://s2.51cto.com/images/blog/202107/01/65c68703f4f4f92ee8aa58c517e329ff.jpeg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
将一个逻辑内部、外部的节点分开,每个动态节点当成一个 (fragment) 这使得动态节点别话只会出现在如 v-if、v-for 这样的结构性指令之下。将节点关系切分为一个一个的区块树(Block Tree,梗????),减少无谓的遍历。
这使得vdom 的更新性能与模版大小相关 => 与动态内容的数量相关(即哪儿需要改,就只让哪儿改,只实现最小操作)
![[现场实录] VueConf 2019 尤雨溪演讲总结_Vue _10](https://s2.51cto.com/images/blog/202107/01/3c554b7ec9883cb02c49709ecd81db7b.jpeg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
速度优化:2.6.10(36ms),3.0(5.44ms)约 6 倍的速度增长。
3、更多编译时优化。
TypeScript
1、Class API ❌:
原本的目的是支持 TypeScript:this 下的属性类型推到无法有效实现,Decorator 提案很不稳定;
Class API 除了使用了原生愈发,并未带来任何新的优势,OOP 里的继承等价值在 UI 层使用较少。
2、Function-based API ✅:
![[现场实录] VueConf 2019 尤雨溪演讲总结_Vue _11](https://s2.51cto.com/images/blog/202107/01/b005352090713e4e73972124bff079a0.jpeg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
![[现场实录] VueConf 2019 尤雨溪演讲总结_Vue _12](https://s2.51cto.com/images/blog/202107/01/3d5de8cbf7df836ef40c1767b6fe0fcc.jpeg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
更好的 TypeScript 类型推导支持(不需要任何手动的类型声明,一套代码同时支持),更灵活的逻辑复用(没有命名冲突、props 等数据来源更清晰、没有额外的创建成本),Tree-shaking 友好,代码可以被压缩。
3、最新 RFC:/vuejs/rfcs
Q&A
1. Vue.js 3.0 还有哪些不足?
IE 11 还是会支持,只是会额外花时间来解决。此外,3.0 的劣势都在尽力解决。
2. 3.0 是否有破坏性的改动?升级效率?
这就是 RFC 的价值,所有的重大改变、背后的意义、如何应对这些修改。基本的修改都会有自动化工具来更新。同时会有一个兼容版本,降低更新成本。
3. React 渲染切片,Vue 仍会有相关成本?
切片并非是万能药,只有极端条件下可以完成性能的保障。内部的复杂度较高,实现后仍未能满足性能效果,切片会让 nextTick 等代码都有破坏性修改(因为可能是多个 nextTick)。
4. Vue 未来的发展方向?
门槛低,价值高。只要有人用,就一直维护和更新。
5. 很多企业用户在用 React,因为在 Native 方向有更好的兼容,Vue 未来会对 Native 有更好的兼容吗?
一套代码,多端实现。React 虽然有 React Native,但是各个厂家都有相应的对策,Google 有Flutter、Apple 有 SwiftUI,大家不可能让一个开发范式被一个公司使用。恰好,Vue 是独立的开源,没有企业竞争。
国内正好还有小程序,推荐 DCloud 做的 uni-app。
![[现场实录] VueConf 2019 尤雨溪演讲总结_Vue _13](https://s2.51cto.com/images/blog/202107/01/601e8af20b26ddb7f32ebdb2b3ba4acb.jpeg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)
















