架构-vue3笔记
1.Monorepo介绍
Monorepo 是管理项目代码的一个方式，指在一个项目仓库(repo)中管理多个模块/包(package)
优点:
一个仓库可维护多个模块，不用到处找仓库
方便版本管理和依赖管理，模块之间的引用，调用都非常方便
缺点:仓库体积会变大。
2.Vue3项目结构
reactivity:响应式系统
runtime-core:与平台无关的运行时核心 (可以创建针对特定平台的运行时 - 自定义渲染器)
runtime-dom: 针对浏览器的运行时。包括DOM API，属性，事件处理等
runtime-test:用于测试
server-renderer:用于服务器端渲染
compiler-core:与平台无关的编译器核心
compiler-dom: 针对浏览器的编译模块
compiler-ssr: 针对服务端渲染的编译模块
compiler-sfc: 针对单文件解析
size-check:用来测试代码体积
template-explorer：用于调试编译器输出的开发工具
shared：多个包之间共享的内容
vue:完整版本,包括运行时和编译器
3.实现响应式
1.实现reactive：packages\reactivity\src\reactive.ts
1)reactive的数据会经过new Proxy处理返回一个代理对象，获取或者设置代理对象属性时会走mutableHandlers的get和set（Reflect获取或者设置对象属性，设置成功返回true失败返回false）
2)通过new WeakMap缓存代理对象（即reactive两次相同的对象，返回的代理对象是同一个）
3)reactive返回的代理对象再次经过reactive返回的是同一个代理对象，第二次reactive时会走mutableHandlers的get方法给代理对象增加一个属性表示对象是否被代理过，
在createReactiveObject方法中如果对象是已经被代理过了，那么返回本身即可
2.实现effect：packages\reactivity\src\effect.ts
// 组件初次渲染执行回调，依赖的属性变化也会执行回调
// runner()强制执行回调
// runner.effect.stop()关掉effect
let runner = effect(() => {
console.log('ok')
app.innerHTML = state.name + '今年' + state.age + '岁了' + state.age;
})
runner();
runner.effect.stop();
1)组件首次调用执行effect的run方法，在run方法中收集每个属性和它依赖的effect，每个effect和它依赖的属性(在effect回调中取值时会走get方法，在get方法中调用track方法进行收集)
2)设置属性值时会走set方法执行trigger方法执行属性对应的effect的run方法即可（即执行回调）
3)执行effect的返回值函数即执行effect的run方法即可（即执行回调）
4)执行runner.effect.stop()相当于执行effect上面的stop方法解除effect对应的属性上面的effect，这样属性改变对应的effect不执行
3.总结
1.取属性值时，搜集每个属性上面的effect，effect对应的每个属性
2.设置值时，调用每个属性上面的effect
3.取消effect，就是取消每个effect上面的属性的effect
4.实现计算属性packages\reactivity\src\computed.ts
// computed的参数可以是对调也可以是对象，回调相当于get
// myAge.vaule取值
// 取值时走get，设置值时走set
// 取值，值不变走缓存
const myAge = computed({
get() { // 计算属性的缓存 (dirty)
return state.age + 18;
},
set(value) { // 依赖收集是取值的时候收集，set不需要
console.log(value)
}
})
1. 计算属性是一个effect，回调是getter（new ReactiveEffect）
2. 计算属性的依赖属性会收集computed这个effect（effect依赖的属性会自动收集回调，计算属性中将get作为回调传入）
3. 计算属性在effect中使用，会收集对应effect方法(计算属性也是一个属性，也可以成为effect回调依赖的属性，trackEffects中收集effect)
4. 第一执行effect 时会取computed的值，dirty变为false;
此时多次执行会走缓存
5.计算属性依赖的值发生变化了， dirty变为true; 触发计算属性依赖值收集的effect
在次取计算属性的值 因为dirty为true 会重新计算计算属性的值（triggerEffects）
5.实现ref：packages\reactivity\src\ref.ts
// 放对象和基本属性都能返回一个响应数据，state.vaule取值
const state = ref(0);
const state = ref(obj);
1.ref是一个RefImpl对象，取值时收集对应effect，返回值
2.设置值时触发对应effect
6.实现模板编译packages\runtime-dom
let App = {
props: {
title: {}
},
// setup可以返回一个对象，返回的就是模板所需要的数据，
// 也可以返回一个函数，相当于render函数，返回模板
setup(props, ctx) {
return {
flag
}
},
// 每次更新重新调用render方法
// proxy就是setup返回的数据，数据也可以通过this来获取
render(proxy) {
return h('h1', { onClick:this.add,title:proxy.title},this.count.value)
}
}
// createApp第二个参数为组件接受的属性
let app = createApp(App, { title: 'zf', a: 1 });
app.mount('#app');
1.模块依赖
runtime-dom依赖runtime-core，runtime-core依赖reactivity（可以使用依赖包暴露出来的方法）
1)实现操作dom的一些方法放在renderOptions对象中,包含dom的增删改查和dom属性的更新操作(packages\runtime-dom\src\index.ts)
2)createApp方法就是packages\runtime-core\src\apiCreateApp.ts文件的createAppAPI，方法内调用render方法将虚拟节点渲染到指定
容器内，render方法相当于packages\runtime-core\src\rendener.ts文件中的render方法
3)虚拟节点通过packages\runtime-core\src\createVNode.ts文件中的createVNode方法创建
4)render方法拿到虚拟节点和要挂载的容器通过调用patch方法将组件挂载在页面上和完成组件的更新
5)processComponent方法中的mountComponent方法处理组件，通过createComponentInstance方法获得组件实例，通过setupComponent方法给实例属性赋值
6)调用setupRenderEffect中调用render得到虚拟节点subTree，拿着虚拟节点subTree调用patch方法将虚拟节点变成真实节点插入到页面中
7)diff算法（那新老虚拟dom调用patch比较）
1.元素类型不一致直接干掉老元素创建新元素
2.元素一样就开始对比服用元素的属性和孩子(patchElement方法)
3.比较孩子
1)之前是数组 ， 现在是文本 删除老的节点 ，用新的文本替换掉
2)之前是数组 ， 现在也是数组 比较两个儿子列表的差异 （* diff算法）
1.创建新老节点的尾指针e1和e2，i是从头开始比较时会加一
2.从头开始比较复用节点，碰到不可复用的节点开始从后比较复用节点
3.i > e1并且i <= e2说明有新增的元素，但是往前新增还是往后新增不知道，通过anchor参照物找到新增的位置（老少新多）
4.i > e2并且i <= e1说明有要删除元素，删除多余元素即可(老多新少)
5.未知序列对比：根据新的节点 创造一个映射表 ， 用老的列表去里面找有没有，如果有则复用，没有就删除。 最后新的多余在追加，
复用节点时通过了最长递增子序列算法来尽可能的复用节点
最长递增子序列算法：传入数组[2, 3,1,5,6,8,7,9,4]，得到数组[2, 3,5,6,7,9]
3)之前是文本， 现在是是空 直接删除老的即可
4)之前是文本 现在也是文本 直接更新文本
5)之前是文本 现在是数组 删除文本 新增儿子
6)之前是空,现在是文本,直接更新文本
7.实现vuex4
1)用法
main.js文件:
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
// Vue.use(store) 插件的用法， 会默认调用store中的install方法
// 可以指定第二个参数，隔离多个store,组件中const store = useStore('my');
createApp(App).use(store,'my').mount('#app')
store/index.js文件:
import { createStore } from 'vuex'
const store = createStore({
strict: true, // 开启严格模式， 不允许用户非法操作状态 （只能在mutation中修改状态，否则就会发生异常）
plugins: [ // 会按照注册的顺序依次执行插件,执行的时候会把store传递给你
customPlugin:function customPlugin(store) {
let local = localStorage.getItem('VUEX:STATE');
if (local) {
// 替换store中的state
store.replaceState(JSON.parse(local))
}
// 调用commit方法后，会执行subscribe，将commit的{ type, payload }和store中的state传过来
store.subscribe((mutation, state) => { // 每当状态发生变化 （调用了mutation的时候 就会执行此回调）
localStorage.setItem('VUEX:STATE', JSON.stringify(state))
})
}
],
state: { // 组件中的data
},
getters: { // 计算属性 vuex4 他并没有实现计算属性的功能
},
mutations: { // 可以更改状态 必须是同步更改的
},
actions: { // 可以调用其他action，或者调用mutation
},
modules: { // 子模块 实现逻辑的拆分
aCount: {
namespaced: true, //需要加上namespaced
state: { count: 0 },
mutations: {
add(state, payload) { // aCount/add
state.count += payload
}
},
}
}
})
export default store;
App.vue组件中
import { useStore } from 'vuex'
import { computed, toRefs } from 'vue'
setup() { // vue3 有个compositionApi的入口
const store = useStore();
function add() {
store.commit('add', 1)
store.commit('aCount/add', 1)//模块化
}
function asyncAdd() {
store.dispatch('asyncAdd', 1)
}
return {
count: computed(() => store.state.count), //使用computed返回的数据才能有响应式
double: computed(() => store.getters.double),
aCount: computed(() => store.state.aCount.count), //模块化
add,
asyncAdd
}
}
//{{ count }}新的写法，{{ $store.state.count }}老的写法依然可以用
2)源码
1.实现createStore方法：vuex/index.js文件中createStore方法返回一个store对象即可
2.实现install方法：vuex/store.js文件中app.provide将store放在全局
3.实现useStore方法：vuex/injectKey.js文件使用inject拿到store
4.state:通过reactive响应式包装用户传入的state
5.getters：将用户传入的getters放在store.getters上即可(目前没有缓存功能，内部使用defineProperty实现，没有使用computed实现，因为vue版本内部问题)
6.实现actions：将用户action订阅在store._actions上，调用dispatch方法时取出对应方法调用即可
7.实现mutations：将用户action订阅在store._mutations上，调用commit方法时取出对应方法调用即可
8.模块化
1)格式化用户传入的数据:通过ModuleCollection类将用户传入的数据格式化成树结构放在store的_modules属性上(root/children的树结构)
2)模块化state：通过installModule将state/Getters/Action/Mutation以树结构格式化在store的_state/wrappedGetters/_actions/_mutations上
3)获取state时，直接去store._state上取，用户调用dispatch或commit直接去_actions/_mutations上取
9.严格模式(只能在commit中修改state):store上加上一个属性commiting,默认为false，调用commit时将commiting变为true,使用watch监听state是否被修改，
修改的情况下commiting为false，提示报错
10.实现plugins:模块化后调用subscribe订阅插件,commit后调用订阅的插件即可
11.replaceState:用新state替代老的state即可
3)registerModule用法
注册模块，可以实现登录后再去注册模块
//['aCount', 'cCount']给aCount模块下面增加一个cCount
//'aCount'给aCount模块增加内容
store.registerModule(['aCount', 'cCount'], {
namespaced: true,
state: {
count: 100,
},
mutations: {
add(state, payload) {
state.count += payload
}
},
})
8.router4
1)使用
1.router/index.js文件
import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component:About
}
]
const router = createRouter({
//相当于之前的mode，createWebHistory是History模式，createWebHashHistory是hash模式
history: createWebHistory(),
routes
})
export default router
2.main.js文件
mport router from './router'
createApp(App).use(router).mount('#app')
3.App.vue文件
2)原理
1.实现createWebHashHistory,createWebHistory:history/html5.js文件中，hash和History路由都使用window.History来实现，
返回一个history对象，包含当前路由地址参数和路由跳转方法
2.实现createRouter
1)实现install方法:注册RouterLink和RouterView组件
2)扁平化用户传入的routes：createRouterMatcher中实现
3)实现$router和$route:使用app.config.globalProperties和app.provide全局注入这两个属性
3.实现RouterLink组件:内部是a标签，跳转时调用router.push方法即可
4.实现router-view组件：根据匹配到的路径渲染对应组件即可
3)a组件进入b组件路由钩子调用顺序
a组件：beforeRouteLeave
全局的 beforeEach
b组件beforeRouteUpdate
路由beforeEnter。
b组件beforeRouteEnter。
全局的 beforeResolve
全局afterEach
9.vite
1)下载
pnpm install vite -D
2）启动 vite
Vite 主要由两部分组成
(开发环境)一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）,Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍
(生产环境)一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源
1.package.json
{
"scripts": {
"dev": "vite",
"build": "vite build"
}
}
2.vite.config.js
import { defineConfig } from "vite"
export default defineConfig({})
3.src\env.d.ts
Vite 默认的类型定义是写给它的 Node.js API 的,要将其补充到一个 Vite 应用的客户端代码环境中
客户端类型
如果你的库依赖于某个全局库
使用/// 指令
三斜线指令仅可放在包含它的文件的最顶端
三斜线引用告诉编译器在编译过程中要引入的额外的文件
///
4. src\main.ts
export function render() {
document.getElementById("app")!.innerHTML = "main";
}
render();
if (import.meta.hot) {
import.meta.hot.accept((updatedModule) => updatedModule.render());
}
3)支持 vue3
1.安装 vue
pnpm install vue
pnpm install @vitejs/plugin-vue -D
2.vite.config.ts
import { defineConfig } from 'vite'
+import vue from "@vitejs/plugin-vue";
export default defineConfig({
+ plugins: [vue()]
})
3.src\env.d.ts
///
+declare module "*.vue" {
+ import type { DefineComponent } from "vue";
+ const component: DefineComponent<{}, {}, any>;
+ export default component;
+}
4）支持 typescript
vue-tsc可以对 Vue3 进行 Typescript 类型较验
pnpm install typescript vue-tsc -D
//package.json
{
"scripts": {
"dev": "vite",
+ "build": "vue-tsc --noEmit && vite build"
},
}
5)ESLint
1.安装
pnpm install eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin @vue/eslint-config-typescript -D
//.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true
},
extends: [
"plugin:vue/vue3-recommended",
"eslint:recommended",
"@vue/typescript/recommended"
],
parserOptions: {
parser: "@typescript-eslint/parser",
ecmaVersion: 2021
},
rules: {
"no-unused-vars": "off",
"vue/no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "off"
},
globals: {
defineProps: "readonly"
}
}
//.eslintignore
node_modules
dist
*.css
*.jpg
*.jpeg
*.png
*.gif
*.d.ts
//package.json
{
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
+ "lint": "eslint --ext .ts,.tsx,vue src/** --no-error-on-unmatched-pattern --quiet",
+ "lint:fix": "eslint --ext .ts,.tsx,vue src/** --no-error-on-unmatched-pattern --quiet --fix"
},
}
6)Prettier(ESLint会按照Prettier风格来校验代码)
prettier主要解决的是代码风格问题
pnpm install prettier eslint-plugin-prettier @vue/eslint-config-prettier -D
//.eslintrc.js
extends: [
"plugin:vue/vue3-recommended",
"eslint:recommended",
"@vue/typescript/recommended",
+ "prettier",
+ "@vue/eslint-config-prettier"
],
rules: {
+ "prettier/prettier": [
+ "error",
+ {
+ singleQuote: false,
+ tabWidth: 2,
+ indent: 2,
+ semi: false,
+ trailingComma: "none",
+ endOfLine: "auto"
+ }
+ ],
+ "no-unused-vars": "off",
+ "vue/no-unused-vars": "off",
+ "@typescript-eslint/no-unused-vars": "off"
+ },
//.prettierrc.js
module.exports = {
singleQuote: false, //使用单引号
semi: false, 末尾添加分号
tabWidth: 2,
trailingComma: "none",
useTabs: false,
endOfLine: "auto"
}
//.prettierignore
node_modules
dist
//.editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
7)lint-staged(提交前做eslint检查)
pnpm install mrm -D
npx mrm lint-staged
8)commitlint(commit信息检查)
pnpm install @commitlint/cli @commitlint/config-conventional -D
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
//commitlint.config.js
module.exports = {
extends: ["@commitlint/config-conventional"],
rules: {
"type-enum": [
2,
"always",
[
"build",
"chore",
"ci",
"docs",
"feature",
"fix",
"perf",
"refactor",
"revert",
"style",
"test"
]
]
}
}
9）配置别名
//vite.config.ts
import { defineConfig } from "vite"
+import { resolve } from "path"
import vue from "@vitejs/plugin-vue"
export default defineConfig({
+ resolve: {
+ alias: {
+ "@": resolve("src")
+ }
+ },
plugins: [vue()]
})
//tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"esModuleInterop": true,
"lib": ["esnext", "dom", "es2018.promise"],
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["src/*"]
+ }
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
10)样式
1.css（默认支持）
2.less和sass
pnpm install sass less -D
//局部默认支持
+
+
//全局
//vite.config.ts
import { defineConfig } from "vite"
import { resolve } from "path"
import vue from "@vitejs/plugin-vue"
export default defineConfig({
resolve: {
alias: {
"@": resolve("src")
}
},
plugins: [vue()],
+ css: {
+ preprocessorOptions: { //这边帮你引入文件
+ scss: {
+ additionalData: '@import "@/styles/theme.scss";'
+ },
+ less: {
+ additionalData: '@import "@/styles/theme.less";'
+ }
+ }
+ }
})
//src\styles\theme.less
$color: green;
//src\styles\theme.scss
$color: green;
//src\components\HelloWorld.vue
11）PostCSS(给样式加前缀，兼容不同浏览器)
pnpm install autoprefixer -D
//postcss.config.js
module.exports = {
plugins: [require("autoprefixer")]
}
// .browserslistrc
>0.2%
not dead
not op_mini all
12）静态资源处理
public 目录
如果有以下需求
这些资源不会被源码引用（例如 robots.txt）
这些资源必须保持原有文件名（没有经过 hash）
那么你可以将该资源放在指定的 public 目录中，它应位于你的项目根目录
该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下
//index.html
13)mock
下载
npm i mockjs vite-plugin-mock -D
//vite.config.js
+import { viteMockServe } from "vite-plugin-mock";
+ plugins: [vue(),viteMockServe({})]
//mock\test.ts根目录创建mock目录
import { MockMethod } from 'vite-plugin-mock';
export default [
{
url: '/api/get',
method: 'get',
response: ({ query }) => {
return {
code: 0,
data: {
name: 'vben',
},
};
},
},
]
14）axios：和其它项目一样
15)状态管理：和其它项目一样
16）路由：和其它项目一样
17）环境变量和模式
Vite 在一个特殊的 import.meta.env 对象上暴露环境变量
//.env.development根文件下创建
VITE_APP_WEB_URL = "/dev"
//.env.production
VITE_APP_WEB_URL = "/prod"
//src\main.ts
+console.log(import.meta.env)//拿到环境变量
//package.json
{
"scripts": {
+ "build:dev": "vue-tsc --noEmit && vite build --mode development",
+ "build:prod": "vue-tsc --noEmit && vite build --mode production",
},
}
学到21.37