Vue3入门

[banli17]

源码组织方式

• 采用 ts 重写
• monorepo 管理项目结构

// 编译相关
compiler-core  // 平台无关编译器  
compiler-dom 
compiler-sfc  // 单文件组件编译
compiler-ssr    // 服务端渲染编译
reactivity    // 响应式
// 运行时
runtime-core 平台无关运行时  
runtime-dom 浏览器端运行时，处理 dom 、事件
runtime-test  测试运行时，渲染的 dom 是一个对象，可以运行在所有环境
server-renderer 服务端渲染
shared  工具
size-check  检查 treesharking 后包的大小
template-explorer 浏览器里运行的实时组件，会输出 render 函数，readme 里有在线访问的地址
vue 构建完整版的 vue，依赖 runtime 和 compiler 

[banli17]

不同构建版本 vue3 不再构建 umd 方式，umd 代码有冗余

cjs

• vue.cjs.js commonjs 方式
• vue.cjs.prod.js 生产版本

global 可以直接 script 导入，会有全局 Vue 变量

• vue.global.js
• vue.global.prod.js
• vue.runtime.global.js 只包含运行时的，不包含 complier
• vue.runtime.global.prod.js

browser

• vue.esm-browser.js
• vue.esm-browser.prod.js
• vue.runtime.esm-browser.js
• vue.runtime.esm-browser.prod.js

bundler 没有打包所有的代码，需要配合打包工具使用

• vue.esm-bundler.js
• vue.runtime.esm-bundler.js 脚手架创建时，默认使用的，体积更小

[banli17]

性能提升

响应式系统升级

• vue2 defineProperty
• vue3 proxy 性能好
  • 监听动态新增、删除属性
  • 监听数组的索引和 length 属性

编译优化