Vue3.0全球发布会干货总结

Vue3.0全球发布会干货总结观看Vue3全球发布会的总结笔记,翻译水平有限大家海涵。 最后有学习资料汇总。 抽象渲染器与渲染目标无关 – (Dom、Canvas、终端显示)支持自定义渲染器。 可扩展是编译器 可以通过实现编译器插件来扩展编译器。 通过编译推断型虚拟Dom实现静态提升是Vue3.0的非常显著…

观看Vue3全球发布会的总结笔记,翻译水平有限大家海涵。 最后有学习资料汇总。

先来一波我杨哥的视频普及一下 Vue3知识

Vue3.0全球发布会干货总结

Vue3光速入门系列视频 视频地址:www.bilibili.com/video/BV1Wh… 目录

后续更新计划 • router-next • vuex-next • ts + vue3 • vite • 企业级项目

一、回顾Vue3创作历史

Vue3.0全球发布会干货总结

Phase 1:Prototype原型

  • 2018/02/26 – The very fist idea about Vue3
    • 想象下一代Vue主版本应该是什么样子
  • 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探索

Vue3.0全球发布会干货总结

  • 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 核心任务

Vue3.0全球发布会干货总结

  • 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

Vue3.0全球发布会干货总结

  • 2019/09 2.x Options API support 支持Vue2.0 定义风格API New compiler implementation 实现新编译器

  • 2019/10 v-model

  • 2019/11 Transition system 动画过渡系统

  • 2019/12 Toolling

    • SFC 单文件组件
    • HMR 编译器热替换模块
  • 2020/01/02 3.00-alpha.1

  • 2020 01 ~ 04 Server-side rendering 服务器渲染

Phase 5: Stability & Ecosystem 提高稳定性与生态建设

Vue3.0全球发布会干货总结

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.0全球发布会干货总结

二、Vue3新特性

Vue3.0全球发布会干货总结

  • 增强可维护性

    • TypeScript + modularized internals 基于TS语言编写和模块化更强的核心代码
  • 性能提升

    • Proxy-based Reactivity System 基于代理的响应式系统
    • Compiler-informed Virtual DOM & SSR 编译推断的虚拟Dom和服务器渲染
  • 更小体积

    • Tree-shaking 按需裁剪
    • Compile-time flags
  • Scales better 更好的可伸缩性

  • Better DX New Single-file Component improvements 新的单文件组件性能改进

Modularized Internals 模块化内核

Vue3.0全球发布会干货总结

Vue不再是一个大的黑盒,

  • 独立的响应式
  • 抽象渲染器与渲染目标无关 – (Dom、Canvas、终端显示)支持自定义渲染器。
  • 可扩展是编译器 可以通过实现编译器插件来扩展编译器。

解锁高级功能

Vue3.0全球发布会干货总结

  • 编译时i18n国际化
  • 自定义渲染器 例如: 原生App、WebGL、终端显示
  • 独立的响应式实现包 – 与外部模板系统一起组成新的应用

TypeScript支持

Vue3.0全球发布会干货总结

  • 源码开发 – Internal
    • 更好的编辑器支持 – 重构代码更加的方便而安全
    • 提高代码贡献者提交信心
  • 业务编写 – External
    • 满足日益增长的TS Vue使用者需求
    • 自动类型推断 – 一致性检查 降低维护成本

Composition API 复合API

Vue3.0全球发布会干货总结

  • 助推复杂业务逻辑用例
  • 自然完善的TS支持
  • 为封装解耦组织业务逻辑而生
  • 替代mixins混入方案

讲的这么浪 简直就是广告词 😝

Compiler-informed VirtualDom 编译推断型虚拟Dom – 静态提升

Vue3.0全球发布会干货总结

通过编译推断型虚拟Dom实现静态提升是Vue3.0的非常显著的性能提升的地方。 在编译期间我们很容易判断视图模板中哪一部分是动态部分,哪一部分是静态部分。然是如果使用纯JS的渲染函数或者JSX语法做到这一步就很难。所以Vue3很大胆的创造性的在编译器进行分析和优化,只保留必要的动态部分的渲染功能,减少了运行时的运算量。

Vue3.0全球发布会干货总结

Compiler-informed SSR 编译推断式服务器段渲染

Vue3.0全球发布会干货总结

  • 静态提升内容提前转化为纯字符串
  • 由于客户端注水激活(hydration)时只激活动态节点,性能提升显著。

Tree-shaking-aware global API 全局API可按需剪裁

Vue3.0全球发布会干货总结

有图有真相,总之编译体积变小。

新的单文件组件特性

Vue3.0全球发布会干货总结

  • <script setup> 针对复合API的语法糖

直接导出绑定值(行为函数、对象、响应式对象)

Vue3.0全球发布会干货总结

  • <style vars> 样式支持响应式对象作为变量

  • 完美支持Typescript语法

Vue3.0全球发布会干货总结

Suspense悬念功能 – 异步依赖

Vue3.0全球发布会干货总结

三、正式版推出

Vue3.0全球发布会干货总结

  • 3.0推出稳定版但是版本编号还暂时保留为@next – 给社区更多的应对时间
  • 个子项目目前还在beta、RC 会很快发布

Vue3.0全球发布会干货总结

四、参考文档 Trying Vue 3 Today

v3.vuejs.org 官方文档

v3.cn.vuejs.org 官方中文文档

Migration Guide 迁移指南

迁移文档 官方中文文档

杨村长的Vue3.0 迁移私房菜

一篇搞懂Vue3.0

渐进式手敲Vue3.0框架

Vue3.0全球发布会干货总结

今天的文章Vue3.0全球发布会干货总结分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/21751.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注