源码组织方式
• 源码采用 TypeScript 重写 • 使用 Monorepo 管理项目结构(也就是源代码)
使用Monorepo管理项目结构
使用一个项目管理多个包，把不同功能的代码放到不同的package中管理，每个功能模块都可以单独发布，单独测试，单独使用。
packages 目录结构
pageages 目录下都是独立发行的包，可以独立使用，以compiler 开头的包，它们都是和编译相关的代码
-
compiler-core和平台无关的编译器
-
compiler-dom 是浏览器平台的编译器， 依赖与compiler-core
-
compoler-sfc sfc 是 单文件组件的意思，作用是编译单文件组件，依赖与compiler-core 和 compiler-dom
-
compiler-ssr 是服务端渲染的编译器，依赖与compiler-dom
-
reactivity 数据响应式系统，可以独立使用
-
runtime-core 和平台无关的运行时
-
runtime-dom 针对浏览器的运行时，处理原生 dom api 事件等
-
runtime-test 是一个专门为测试编译的轻量级运行时，由于这个运行时渲染出来的 DOM 树其实是一个JS 对象，所以这个js 对象可以运行在所有的环境里，可以用来测试是否渲染正确，可以用来序列化dom 以及记录某次dom 中的操作
-
server-renderer 用于服务端渲染
-
shared 内部使用的公共APi
-
size-check 是一个私有的包，不会发布到`npm ，在 ch 检查包的大小
-
templae-explorer 在浏览器运行的实时编译组件，会输出render 函数
-
vue 构建完整版Vue
不同构建版本
Vue3中不再构建UMD模块化的方式，因为UMD会让代码有更多的冗余，它要支持多种模块化的方式。Vue3中将CJS、ESModule和自执行函数的方式分别打包到了不同的文件中。在packages/vue中有Vue3的不同构建版本。
- cjs（两个版本都是完整版，包含编译器）
- vue.cjs.js
- vue.cjs.prod.js（开发版，代码进行了压缩）
- global（这四个版本都可以在浏览器中直接通过scripts标签导入，导入之后会增加一个全局的Vue对象）
- vue.global.js（完整版，包含编译器和运行时）
- vue.global.prod.js（完整版，包含编译器和运行时，这是开发版本，代码进行了压缩）
- vue.runtime.global.js
- vue.runtime.global.prod.js
- browser（四个版本都包含esm，浏览器的原生模块化方式，可以直接通过
- vue.esm-browser.prod.js
- vue.runtime.esm-browser.js
- vue.runtime.esm-browser.prod.js
- vue.esm-bundler.js
- bue.runtime.esm-bundler.js
Composition API
- RFC (Request For Coments)
- Composition API RFC
设计动机
- Options API
- 包含一个描述组件选项(data、methods、props等)的对象
- Options API 开发复杂组件，同一个功能逻辑的代码被拆分到不同选项
- Composition API
- Vue.js 3.0 新增的一组API
- 一组基于函数的API
- 可以更灵活的组织组件的逻辑
Options API Demo
export default {
data () {
return {
position: {
x: 0,
y: 0
}
}
},
created () {
window.addEventListener('mousemove', this.handle)
},
destroyed () {
window.removeEventListener('mousemove', this.handle)
},
methods: {
handle (e) {
this.position.x = e.pageX
this.positions.y = e.pageY
}
}
}
Composition Demo
Composition API提供了一个基于函数API，让我们可以更灵活组织组件的逻辑， 使用Composition API可以更合理的组织代码结构，还可把一些功能提取出来，方便其他组件复用
import { reactive, onMounted, onUnmounted } from 'vue'
function useMousePosition () {
const position = reactive({
x: 0,
y: 0
})
const update = (e) => {
position.x = e.pageX
position.y = e.pageY
},
onMounted (() => {
window.addEventListener('mousemove', update)
})
onUnmounted (() => {
window.removeEventListener('mousemove', update)
})
return position
}
export default {
setup () {
const postion = useMousePosition
return {
postion
}
}
}
// useMousePosition提取到公共模块中，然后直接导入即可
vue3.js的compositionAPI
- vue3新增的一组api
- 一组基于函数的api
- 可以更灵活的组织组件的逻辑
性能提升
响应式系统升级
-
Vue3使用Proxy对象重写了响应式系统。
-
Vue.js 2.x中响应式系统的核心 defineProperty，初始化的时候递归遍历所有的属性，转化为getter、setter
-
Vue.js 3.0中使用Proxy对象重写响应式系统
-
可监听动态新增的属性
-
可以监听删除的属性
-
可以监听数组的索引和length属性
-
编译优化
-
重写了DOM提高渲染的性能。
-
Vue.js 2.x中通过标记静态根节点，优化diff的过程
-
Vue.js 3.0 中标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容
- Fragments（升级vetur插件）
- 静态提升
- Patch flag
- 缓存事件处理函数
源码体积的优化
-
通过优化源码的体积和更好的TreeShaking的支持，减少大打包的体积
-
Vue.js 3.0中移除了一些不常用的API
- 例如：inline-template、filter等
-
Tree-shaking
- 例如：Vue3中的没用到的模块不会被打包，但是核心模块会打包。Keep-Alive、transition等都是按需引入的。
响应式系统升级
vue2中响应式系统的核心defineProperty
vue3中使用proxy对象重写响应式系统
- 可以监听动态新增属性
- 可以监听删除属性
- 可以监听数组的索引和length属性
vite
vite和vuecli的区别
vite
- vite使用原生js ES module加载模块
- vite在开发模式下不需要打包可以直接运行
- 打包的模块更小
- vite在生产环境下使用rollup打包
- 基于es module的方式打包
vueCLI
vueCLI使用webpack打包
vueCLI开发模式下必须对项目打包才可以运行
vite特点
- 快速冷启动
- 按需编译
- 模块热更新
vite 创建项目
vite 创建项目
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
基于模板创建项目(vite不仅仅是vue 别的框架也可以)
npm init vite-app --template react(这个就是支持react框架)
npm init vite-app --template preact
