观看Vue3全球发布会的总结笔记,翻译水平有限大家海涵。 最后有学习资料汇总。
先来一波我杨哥的视频普及一下 Vue3知识
Vue3光速入门系列视频 视频地址:www.bilibili.com/video/BV1Wh… 目录
P1 01-快速起始 www.bilibili.com/video/BV1Wh…
P2 02-传送门Teleport www.bilibili.com/video/BV1Wh…
P3 03-Fragments和Emits选项 www.bilibili.com/video/BV1Wh…
P4 04-自定义渲染器 www.bilibili.com/video/BV1Wh…
P5 05-全局api改为实例方法 www.bilibili.com/video/BV1Wh…
P6 06-API可做摇树优化 www.bilibili.com/video/BV1Wh…
P7 07-v-model使用的变化 www.bilibili.com/video/BV1Wh…
P8 08-渲染函数API的变化 www.bilibili.com/video/BV1Wh…
P9 09-函数式组件使用变化 www.bilibili.com/video/BV1Wh…
P10 10-异步组件使用变化 www.bilibili.com/video/BV1Wh…
P11 11-data选项、自定义组件白名单 www.bilibili.com/video/BV1Wh…
P12 12-自定义指令API和组件保持一致 www.bilibili.com/video/BV1Wh…
P13 13-transition类名变化,watch不再支持点分割路径 www.bilibili.com/video/BV1Wh…
P14 14-event api、filter等移除API一览 www.bilibili.com/video/BV1Wh…
P15 15-一个案例通关vue3核心特性 www.bilibili.com/video/BV1Wh…
P16 16-组件化实战 www.bilibili.com/video/BV1Wh…
后续更新计划 • router-next • vuex-next • ts + vue3 • vite • 企业级项目
一、回顾Vue3创作历史
Phase 1:Prototype原型
2018/02/26 - The very fist idea about Vue3
2018/09/12 - First working prototype
考虑如何组织代码
尝试使用Typescript
尝试使用monorepo
尝试其他新的新的东西 里程碑: mini版vdom运行时环境 + 独立的基于Proxy的响应式API
2018/09/19 - Graduated prototype into current vue-next
repo
将毕业班原型提交Git仓库
2018/09.21 - First Vue 3 announcement at Vue.js London 宣布开发Vue3
Phase 2:Exploration探索
2018末~2019初 尝试各种新东西是否好用
Classify API - 类风格API
TypeScript 类型推断是否好用
Reactive Hooks
Time Slicing
2019/01/04 Established the RFC process
2019/02/27 Class API RFC 推出类风格的API RFC版本
2019/03~2019/05 Researching new rendering strategy 研发新的渲染策略
Phase 3:Pivot 核心任务
2019/05/21 Class API dropped 放弃Class风格API
2019 05 ~ 06 Re-writing core rendering logic 重新编写渲染逻辑
patch flag
block tree optimizations
2019/06/07 Function API RFC
2019/06~08 Composition API design/ feedback
2019/08/16 Composition API RFC
Phase 4:Feature Parity - 特性抹平
兼容Vue2.0大部分API
2019/09 2.x Options API support 支持Vue2.0 定义风格API New compiler implementation 实现新编译器
2019/10 v-model
2019/11 Transition system 动画过渡系统
2019/12 Toolling
2020/01/02 3.00-alpha.1
2020 01 ~ 04 Server-side rendering 服务器渲染
Phase 5: Stability & Ecosystem 提高稳定性与生态建设
2020/04/16 3.0.0-beta.1 2020-05 ~ 06 Dogfooding via Vite 内测Vite - VitePress VitePress项目 - Teams working on v3 support in sub projects 支援v3子项目 2020/06/17 3.0.0-rc1
二、Vue3新特性
Modularized Internals 模块化内核
Vue不再是一个大的黑盒,
独立的响应式
抽象渲染器与渲染目标无关 - (Dom、Canvas、终端显示)支持自定义渲染器。
可扩展是编译器 可以通过实现编译器插件来扩展编译器。
解锁高级功能
编译时i18n国际化
自定义渲染器 例如: 原生App、WebGL、终端显示
独立的响应式实现包 - 与外部模板系统一起组成新的应用
TypeScript支持
源码开发 - Internal
更好的编辑器支持 - 重构代码更加的方便而安全
提高代码贡献者提交信心
业务编写 - External
满足日益增长的TS Vue使用者需求
自动类型推断 - 一致性检查 降低维护成本
Composition API 复合API
助推复杂业务逻辑用例
自然完善的TS支持
为封装解耦组织业务逻辑而生
替代mixins混入方案
讲的这么浪 简直就是广告词 😝
Compiler-informed VirtualDom 编译推断型虚拟Dom - 静态提升
通过编译推断型虚拟Dom实现静态提升是Vue3.0的非常显著的性能提升的地方。 在编译期间我们很容易判断视图模板中哪一部分是动态部分,哪一部分是静态部分。然是如果使用纯JS的渲染函数或者JSX语法做到这一步就很难。所以Vue3很大胆的创造性的在编译器进行分析和优化,只保留必要的动态部分的渲染功能,减少了运行时的运算量。
Compiler-informed SSR 编译推断式服务器段渲染
静态提升内容提前转化为纯字符串
由于客户端注水激活(hydration)时只激活动态节点,性能提升显著。
Tree-shaking-aware global API 全局API可按需剪裁
有图有真相,总之编译体积变小。
新的单文件组件特性
<script setup>
针对复合API的语法糖
直接导出绑定值(行为函数、对象、响应式对象)
Suspense悬念功能 - 异步依赖
三、正式版推出
3.0推出稳定版但是版本编号还暂时保留为@next - 给社区更多的应对时间
个子项目目前还在beta、RC 会很快发布
四、参考文档 Trying Vue 3 Today
v3.vuejs.org 官方文档
v3.cn.vuejs.org 官方中文文档
Migration Guide 迁移指南
迁移文档 官方中文文档
杨村长的Vue3.0 迁移私房菜
一篇搞懂Vue3.0
渐进式手敲Vue3.0框架