一文带你从Vue2.x大迈步走进Vue.js 3.0新时代

前言

Vue2.x 与及Vue 3.x都已经出来很久了，种种原因，它们的区别一直没搞太明白，今天就通过这篇文章给大家梳理一下Vue3.0升级过后带来了哪些新特性以及这些性变化带来的各方面性能或者代码质量的提升。
这里占用大家一杯奶茶的时间，反正不花钱，看了没收获的评论区怼我便是😁。

源码组织方式

源码组织方式的变化

• 源码采用TypeScript重写
  大型项目的开发都推荐使用类型化的语言
• 使用Monorepo管理项目结构
  • 使用一个项目来管理多个包
  • 把不同的功能代码放到不同的packages中管理，功能划分模块更明确，模块间的依赖关系也很明确
  • 每个功能模块都可以单独进行开发、单独测试和单独使用
  • packages目录结构如下：

packages目录下都是独立发行的包，可以独立使用。

• compiler-* 编译相关的代码

  • compiler-core： 平台无关的编译器
  • compiler-dom： 浏览器平台下的编译器，依赖于compiler-core
  • compiler-sfc： 单文件组件的编译器，依赖于compiler-core和compiler-dom
  • compiler-ssr：服务端渲染的编译器，它依赖与compiler-core和compiler-dom

• reactivity：数据响应式系统，可以独立使用。

• runtime-* 运行时相关的代码

  • runtime-core：与平台无关的运行时
  • runtime-dom：针对浏览器的运行时，它处理原生DOM的API、属性、事件等。
  • runtime-test：专门为测试而编写去的轻量级运行时，这个运行时渲染出来的DOM树是一个js对象，所以这个运行时可以运行在所有的js环境里。可以使用它来测试渲染是否正确。它还可以用于序列化DOM，触发DOM事件，以及记录某次更新中的DOM操作。

• server-render：用于服务端渲染；

• shared：vue内部使用的一些公共的API

• size-check：一个私有的包，不会发布到npm。它的左右时在构建时tree-shaking之后检查包的大小。

• template-explorer：在浏览器中运行的实时编译组件，它会输出render函数，该包里面提供了在线访问的地址，我们后面会用到的。

• vue：它是用来构建完整版的vue，依赖与compiler和runtime。

不同的构建版本

与Vue2.x类似，Vue3.0在构建大的时候都构建了不同的版本，可以在不同的场合下使用。
与Vue2.x不同的是，Vue3.0中不再构建umd模块化的方式。因为umd模块化的方式会让代码有更多的冗余，它要支持多种模块化的方式。
Vue3.0的构建版本中，把 cjs、ES Module 和 自执行函数（IIFE）的方式分别打包到了不同的文件中。在packages/vue