vue3.0源码组织方式

与vue2.x版本相比，vue3.0的变化如下：

• 源码组织方式的变化，全部采用ts编写，采用monorepo将独立功能提取到不同包中
• 增加CompositionApi，90%以上的api兼容2.x,解决2.x版本中开发大型项目中超大组件过大不好拆分重用的问题
• 性能提升，重写了虚拟dom、同时使用proxy重写响应式
• 采用vite打包工具，在开发阶段不需打包便可直接运行项目

源代码组织方式

• 采用ts重写，帮我们进行类型检查
• 使用monorepo管理项目结构，一个源代码分为不同的包，将独立功能提取到不同包中，每个模块可以单独测试单独发布

源码中packages目录结构

packages中都是独立发行的包，可以独立使用

• compiler-core,与平台无关的编译器
• compiler-dom，依赖于compiler-core，与浏览器相关的编译器
• compiler-sfc，sfc单文件组件，用来编译单文件组件，依赖于上述compiler-core与compiler-dom
• compiler-ssr，服务端渲染
• reactivity，数据响应式系统
• runtime-core，与平台无关的运行时
• runtime-dom，与浏览器相关的运行时
• runtime-test，为测试编写的轻量级运行时
• server-renderer，服务端渲染
• shared
• size-check，私有包，不会发布到npm，
• template-explorer，
• vue，构建完成版vue

vue3.0不同构建版本

vue3.0在构建时与vue2相同都会构建不同版本，可以在不同场景下使用，与vue2不同的是vue3不构建UMD模块，会有冗余。

在packages/vue中存放了所有构建版本，主要有

• vue.cjs.js
• vue.cjs.prod.js
• vue.esm-browser.js
• vue.esm-browser.prod.js
• vue.esm-bundler.js
• vue.global.js
• vue.global.prod.js
• vue.runtime.esm-browser.js
• vue.runtime.esm-browser.prod.js
• vue.runtime.esm-bundler.js
• vue.runtime.global.js
• bue.runtime.global.prod.js

从分类来看构建版本

• cjs（commonjs模块化方式）
  • vue.cjs.js,commonjs的模块化方式，完整版的vue,包含运行时和编译器，是开发版，未被压缩
  • vue.cjs.prod.js，commonjs的模块化方式，完整版的vue,包含运行时和编译器，是生产版本，代码被压缩
• global（全局，浏览器可以通过script标签引入，会增加全局的vue对象）
  • vue.global.js，完整版的vue,包含运行时和编译器，是开发版，代码未被压缩
  • vue.global.prod.js，完整版的vue,包含运行时和编译器，是生产版，代码被压缩
  • vue.runtime.global.js，只包含运行时的版本，开发版，代码未被压缩
  • bue.runtime.global.prod.js，只包含运行时的版本，生产版本，代码被压缩
• browser（采用esm也就是浏览器原生模块化方式ESModule,可以直接通过script，type=module方式引入）
  • vue.esm-browser.js，完整版的vue,包含运行时和编译器，是开发版，代码未被压缩
  • vue.esm-browser.prod.js，完整版的vue,包含运行时和编译器，是生产版，代码被压缩
  • vue.runtime.esm-browser.js，只包含运行时的版本，开发版，代码未被压缩
  • bue.runtime.esm-browser.prod.js，只包含运行时的版本，生产版本，代码被压缩
• bundler 没有打包所有的代码，需要配合打包工具来使用,都采用esmodule模块化方式
  • vue.esm-bundler.js
  • vue.runtime.esm-bundler.js，使用脚手架创建的项目都采用的是这个版本

Composition API 设计动机

• options API
  • 包含一个描述组件选项（data\methods\props）的对象，生命钩子函数等
  • 开发复杂组件时，同一个功能逻辑的代码被拆分到不同的选项中
• Composition API
  • vue.js3.0新增的一组api
  • 一组基于函数的api
  • 可以更灵活的组织组件的逻辑

性能提升

• 响应式系统升级
  • vue2.x中响应式系统的核心是defineProperty，在初始化时遍历data中的所有成员，把对象中的属性通过defineProperty转换为getter和setter，如果data的属性也是对象的话，需要递归处理为响应式对象，这些处理都是在初始化阶段。
  • vue3.x中使用proxy对象重写响应式系统，无须在初始化时遍历所有属性，如果有多层属性嵌套的时候，只有在访问属性的时候才会递归处理
    • vue3.0可以监听动态新增的属性
    • vue3.0可以监听删除的属性
    • vue3.0可以监听数组的索引和length属性
• 编译优化
  • vue2.x中通过标记静态根节点，优化diff过程，但在vue2中静态节点还需要diff，未被优化
  • vue3.0中标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容
    • 在vue3.0中引入fragments(升级vetur插件)，不需要创建唯一的根节点
    • 静态提升：在初始化的时候创建静态节点
    • patch flag，一个标记，根据patchflag检查是否需要进行diff
    • 缓存事件处理函数,缓存的函数不会发生变化，实际调用的时候去调用最新的函数内容
• 源码体积的优化
  • vue3.0中移除了一些不常用的API如inline-template,filter等，减少打包体积
  • 对tree-shaking支持更好，在编译阶段寻找使用的模块进行打包，减少打包体积

vite

ESModule

• 除ie之外浏览器都支持ESModule
• 通过来加载模块
• 标记为module的script默认为延迟加载的，执行时机为在文档解析完成后，在触发DOMContentLoaded事件前执行

vite 与 vue-cli的区别

• vite在开发模式下不需要打包可以直接运行，采用了浏览器的esmodule模块
• vue-cli开发模式下必须对项目打包才可以运行，如果项目比较大会比较慢
• vite在生产环境下使用rollup打包，基于esmodule的方式打包
• vue-cli使用webpack打包

vite优点

• 无须打包便快速冷启动
• 按需编译
• 模块热更新，模块热更新的速度与模块总数无关

vite创建项目

• vite创建项目

npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

• vite基于模板创建项目(可以支持其他框架)

npm init vite-app --template react
npm init vite-app --template preact