浅谈vue3与vue2的区别

vue3已经出来有一段时间了，相信很多公司项目都已经在用vue3重构项目，或者在新项目中直接用vue3搭建，那么我们学习vue3的必要性就有了。

v2 与 v3 的区别

• v3 采用的是 monorepo 方式进行管理，将模块拆分到 package 目录中
• v3 采用的 ts 开发，增强类型检测，v2 则采用 flow
• v3 性能优化，支持 tree-shaking,不使用就不打包
• v2 后期引入 rfc,使每个版本改动可控 rfcs

v3 内部代码优化

• v3 的数据劫持采用的是 proxy，v2 劫持数据采用的是 defineProperty,defineProperty 有性能问题和缺陷
• v3 对模版编译进行了优化，编译时生成了block tree,可以对子节点的动态节点进行收集，可以减少对比，并且采用了 patchFlag 标记动态节点
• v3 采用了 compositionApi 进行组织功能，解决反复横跳，优化复用逻辑（mixin 带来的数据来源不清晰，命名冲突等），相比 optionsApi 推断更加方便
• 增加了 fragment,teleport,suspend组件

v3 架构分析

1.Monorepo 介绍

• reactivity:响应式系统
• runtime-core:运行时核心，与平台无关
• runtime-dom:针对浏览器的运行时，包括 dom api 属性，事件处理
• runtime-test:测试
• server-renderer:服务端渲染
• compiler-core:与平台无关的编译核心
• compiler-dom:针对浏览器的编译模块
• compiler-ssr:针对服务端渲染的编译模块
• compiler-sfc：针对单文件的解析
• size-check；用来测试代码体积
• template-explore:用于调试编译器输出的开发工具
• shared：多个包之间的共享内容
• vue:完整版本，包括运行时和编译器