Vue.js 3.0 探索

1.源码组织方式的变化

• 源码采用 TypeScript 重写

• 使用 Monorepo 管理项目结构，每个模块可单独测试、发布、使用

• 源码目录结构：compiler 开头的为编译相关的代码，

  • compiler-core：与平台无关的编译器
  • compiler-dom：浏览器下的编译器依赖于compiler-core
  • compiler-sfc：single-file-component 编译单文件组件，依赖compiler-core、compiler-dom
  • compiler-ssr：服务端渲染编译器依赖于compiler-core
  • reactivity：数据响应式系统，可以独立使用
  • runtime-core：与平台无关的运行时
  • runtime-dom：针对浏览器的运行时，处理原生DOM 的API、事件
  • runtime-test：专门为测试编写的轻量级的运行时，这个运行时渲染的DOM 是js对象，可以运行在所有的 js 环境下，可以测试渲染是否正确，还可用于序列化DOM ，触发DOM事件，以及记录某次更新的DOM操作
  • server-renderer：服务端渲染
  • shared：Vue内部使用的公共API
  • size-check：私有包，不会发布到 npm ，在 TreeSharking 之后检查包的大小
  • template-explorer：浏览器运行的实时编译组件，会输出 render 函数
  • vue：构建完整版 Vue，依赖于 compiler 和 runtime
    

• 不同构建版本：在packages/vue/dist 目录下

  • cjs：commonjs 版本
  • global：全局完整版vue包含编译器与运行时与只包含运行时的版本
  • browser：esm 版本
  • bundler：未打包所有代码，要配合打包工具使用，使用 esm 方式

2.Composition API

• 设计动机：Vue2.0 使用的Option API，包含一个描述组件选项（data、methods、props等）的对象，Option API 开发复杂组件，同一个功能逻辑的代码被拆分到不同选项。例如：一个表单验证的组件，要分别用到data、methods、props 等。并且难以提取组件重复代码。
• Composition API：一组基于函数的 API ，可以更灵活的组织组件的逻辑，功能整齐且可提取可重用，同样可以使用 Option API

3.性能提升：

• 响应式系统升级
  • 使用 Proxy 对象重写响应式系统：vue2.x 中 使用 defineProperty 在初始化时遍历 data 中的成员，实现响应式，若成员中嵌套成员则递归实现 get 、set ,如果 data 中的成员未被使用，也会做响应式处理的操作。但在 Vue3 中，只有在成员被用到的时候才会处理响应式
    • 可以监听动态新增的属性
    • 可以监听删除的属性
    • 可以监听数组的索引和 length 属性
• 编译优化
  • Vue2.x 中通过标记静态根节点，优化 diff 的过程
  • Vue3.0 中标记和提升所有的静态根节点，diff 的时候只需要对比动态节点内容
    • Fragments：无需唯一根节点
    • 静态提升：所有静态节点提升只在初始化时渲染，优化 diff
    • Patch flag：标记所有动态节点，优化 diff 检查标记的内容即可
    • 缓存事件处理函数：将事件缓存到cache对象中，需要用时直接取出，避免不必要的更新操作
• 源码体积优化
  • 移除不常用的API 例如：inline-template、filter 等
  • 优化 Tree-shaking ：无引入不打包

4.Vite

介绍：Vite 开发构建工具，是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对Vue文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包

• Vite vs Vue-Cli

  • Vite 在开发模式下不需要打包可以直接运行，在生产环境下使用 Rollup 打包
  • vue-cli 开发模式下必须对项目打包才可以运行，使用 Webpack 打包

• 特点：

  • 快速冷启动
  • 按需编译
  • 模块热更新

• 创建项目：

  • npm init vite-app
  • cd
  • npm install
  • npm run dev

• 基于模板创建项目：

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