聊聊Vue2开发者如何快速上手Vue3

如何快速上手Vue3？下面本篇文章给大家对比一下Vue2和Vue3，并介绍一下Vue2开发者如何快速上手Vue3，希望对大家有所帮助！

聊聊Vue2开发者如何快速上手Vue3

笔者之前是Vue2+React开发者，因项目需要直接上手Vue3，所以快速学习一下，中间会对比一些和React相关的区别。阅读前提：已经上手了Vue2的开发，本文主要聊的问题：

（学习视频分享：vue视频教程）

Vue2 vs Vue3

Vue2只支持单节点，Vue3 template支持多节点，类似react fragments
变化基本都在script中（Option api -> Composition api）不会再看见满屏的this了！！！
style支持v-bind
Proxy代替defineProperty
- defineProperty无法实现对数组对象的深层监听，Proxy是浏览器最新api，功能更加强大。
- 不再支持IE，Vue2想享受Vue3带来的部分更新，可考虑升级Vue2.7版本
TypeScript的支持
- Vue2采用的是Facebook的Flow，没法完美支持TypeScript（所以项目初期技术选型很重要）
- Vue3 TypeScript完全重写，提供和React一样的TS支持
全新生态
- 基本还是vue周边伴随Vue3升级那一套，但是状态管理推荐，由原来的Vuex变为Pina
- 全新的vite支持，包括vitest等，官方提供周边工具更多了
其它优化
- 性能更好，体积更小就不用说了
- 事件监听缓存，类似@click绑定的函数，无需多次创建，放在了cacheHandler缓存中
- SSR：Vue 3.0 会将静态标签直接转化为文本，相比 React 先将 JSX 转化为虚拟 DOM，再将虚拟 DOM 转化为 HTML，这一点Vue3的速度要快很多
- Use Hooks 放弃过去的mixins，使用Hooks解决过去mixins的一些缺点

了解的不多，后续再补充

不再和vue2一样，完全对比两棵虚拟DOM树，Vue3采用动静结合的方法，优化diff性能
通过编译阶段对静态模板进行分析，编译生成 Block tree。更新性能由 模版整体大小相关 =》与动态内容的数量相关，这是一个非常大的性能突破。将代码提升到渲染函数之外，这样可以避免在每次渲染时重新创建这些对象，从而大大提高内存使用率并减少垃圾回收的频率。

vue2 poly-repo
- vue2.x的源码托管在src目录中，然后依据功能拆分出了complier(模板编译的相关代码)，core(与平台无关的通用运行时代码)，platforms(平台专有代码)，server（服务端渲染的相关代码）、sfc（.vue 单文件解析相关代码）、shared（共享工具代码）等目录
vue3 mono-repo
- package可以独立于vue.js去使用，这样例如用户想要使用vue3.0的响应式，可以单独依赖reactive，而不必依赖整个vue.js，减少引用包的体积，而vue2.x却做不到这一点。
源码结构对比

什么是组合式 API？- Vue官方