特性 类型批注 和编译时类型检查 类型推断 类型擦除 接口 枚举 enum mixin 泛型编程 名字空间 元组 tuple 类型 boolean 布尔值 number 数值 string 字符串 any array 数组 tuple 元组 enum 枚举 undefined null void 空类型 方法没有返回值 never 任何类型的子类型 代表不会出现的值 object 对象 基本类型 增加void any enum never 引用类型 高级类型 交叉类型 联合类型 类型别名 类型索引 类型约束 类型映射 条件类型 交叉类型 & 将多个类型合并为一个类型 并 T & U 表示 T 和 U 的交集 123456789101112131415function extend<T, U>(first: T, second: U): T & U { let result:<T & U> = {}; for (let key in first) { ...

pnpm 有什么优势 速度快 节省磁盘空间 pnpm ~/.pnpm-store 建立非扁平化的node_modules .pnpm 软链接 多项目共用一份依赖 前端权限管理的模型 ACL：基于用户的权限管理模型 只需要给当前的用户授权或取消权限 user permission 好处：清晰 简单 缺点：用户量增长，针对每个用户都要维护记录 record 成本高 RBAC：基于角色的权限管理模型 权限跟用户无关 用户-角色-权限 role - permission user - role ABAC：基于属性的权限管理模型 可扩展性很高 VSCode配置12345678910111213141516171819202122232425262728293031323334353637383940// .prettierrc.jsmodule.exports = { // 一行最多多少个字符 printWidth: 150, // 指定每个缩进级别的空格数 tabWidth: 2, // 使用制表符而不是空格缩进行 useTabs: tru ...

解决Vue部署 404 问题123456789101112131415server { listent 80 server_name www.example.com location / { index /dist/index.html try_files $uri /index.html }}const router = new VueRouter({ routers:[ { path: '*', component: NotFound } ]}) package.json12345678910111213141516171819202122232425{ "name": "vue-webrtc", "version": "1.0.0", "private": true, "type": "module&qu ...

父子组件通信兄弟组件通信祖孙 后代 通信非关系组件通信 父子组件通信父组件 –> 子组件 props子组件 –> 父组件 $emit ref 兄弟组件通信 EventBus 12345678910111213141516171819class EventBus { constructor() { this.callbacks = {}; } $on(name, fn) { this.callbacks[name] = this.callbacks[name] || []; this.callbacks[name].push(fn); } $emit(name, args) { if (this.callbacks[name]) { this.callbacks[name].forEach((cb) => cb(args)); } }}Vue.prototype.$bus = new Event ...

生命周期Vue中实例 在创建 –> 销毁 创建 初始化数据 编译template 挂载DOM 渲染 更新渲染 卸载 beforeCreate：实例创建之初 初始化插件 created组件已经创建完成 异步请求获取 DOM 并没有生成 beforeMount：组件挂载之前 mounted：组件挂载之后 异步请求获取 render dom 更新 页面变化 beforeUpdate：数据发生变化 更新之前 updated：数据发生变化更新后 beforeDestroy： 实例销毁前 destroyed：销毁后 activated： keep-alive 组件激活 deactivated：keep-alive 组件停用 errorCaptured： 捕获实例的错误 双向绑定 v-model双向绑定大多用于表单事件，通过监听使用者输入的事件来更新内容。 现阶段大部分工作在App.vue上，template与普通写法一致，js写法： 123456789export default { name: 'app', data() { ret ...

异步编程有哪些实现方式 回调函数：存在问题，回调地狱、代码耦合度高、不利于代码维护 Promise:链式调用 generator：同步顺序书写 函数控制权转移回来 自动执行机制 co函数 async/await：generator promise 自动执行的语法糖 内部自带执行器 await 等待 Promise 变成 resolve 异步逻辑转化为同步顺序 自动执行 this与对象原型prototypehoisting状态提升在程序执行前，编译器先由上到下逐行将代码转为机器可读的命令，然后再执行编译后的指令。 实现一个函数，可以返回输入参数是否为质数？ 123456789101112131415function isPrimeNumber(m) { if (m <= 1 || m % 1 !== 0) { return false; } var n = 2; while (n < m) { if (m % n === 0) { return false; } else ...

两数之和123456789function twoSum(nums, target) { for (let i = 0; i < nums.length; i++) { let num = nums[i]; let targetIndex = nums.indexOf(target - num); if (targetIndex !== -1 && targetIndex !== i) { return [i, targetIndex]; } }} 日期格式化12345678910111213141516171819202122// 格式化日期类型,fmt格式可选择function dateFormat(fmt, date) { let ret; let opt = { "Y+": date.getFullYear().toString(), // 年 "M+": (date.getMont ...

响应式数据根据数据类型【数组和对象】进行不同处理。 对象内部通过defineReactive方法，使用Object.defineProperty()监听数据属性的get进行数据依赖收集，再通过set完成数据更新。 数组则通过重写数组方法实现。扩展7个变更方法（push/pop/shift/unshift/splice/reverse/sort），通过监听这些方法收集依赖和派发更新。 多层对象通过递归实现监听，Vue3使用proxy实现响应式数据。响应式流程：defineReactive定义响应式数据；给属性增加dep收集对应的watcher；等数据变化进行更新。dep.depend——get取值，依赖收集；dep.notify——set设置，通知视图更新。 性能优化点：1. 对象层级过深；2. 不需要响应式数据不放在data；3. Object.freeze可以冻结数据。 Teleport 将组件的渲染内容传送到 DOM 的其他位置，解决布局样式隔离问题。内容渲染在目标 DOM，但逻辑仍属于原组件树（保持响应式、生命周期、事件等）Vue3 中将 Teleport 作为 ...

醉是流年作者：吴华锦 烛光曳曳竹影移，庭前寒露满纱窗。冷月沁出珍珠泪，银桂飘得十里香。 灿若星辰美若仙，凌波飞渡有河洛。长发飘然惊鱼貌，粉颊带雪玲珑心。 江南烟雨春，湘西山色好。临风但曰雅，新亭铺盏茶。儿童游戏闹，浣洗言谈欢。渐午炊烟起，回家吃饭去。 月洒金辉镶碧树，花落银盘挂玉帘。 山花已盛开，好景时光裁。暖阳须明日，君卿直可待。 看他悠然自得，胸中自有丘壑，世事纷然无涯，不如归家喝茶。天也晴，水也清，风光正好，可惜，行人太匆匆，为哪般？纵使急速有千里，穿林起风声，不敌年华易老，人面婆娑，不如举起一杯清浅，相邀歌。 小城故事多，夕阳剪影，华灯初上，夜色宁静。好山好水好风景，燕雀穿空有余音，晚风轻拍美人镜，皱起鳞光催夜频。 日长夜短不足眠，窄巷深深，行人急促，摩肩接踵。欢庆后，百无聊赖，观星摘月，追踪往年。正是，良辰好景莫辜负，赏心乐事各家院，天地辽阔，不似，处处高楼遮望眼。恰逢佳节好心闲，山水同源，花开自在，艳羡路人。称病几分重，游丝不肯离，静心且静气，常翻几页书。读完我也不知道看了什么，只是看书这件事本身就很有意思。爱惜身体，早睡，早不早起看毅力，晚安。