- 博客(42)
- 收藏
- 关注
RSS订阅原创 前端 - Typescript - - type和interface的区别
TypeScript中type和interface的主要区别包括：1.声明方式不同（type用=，interface用对象形式）；2.type可声明任意类型，interface仅限对象；3.继承方式不同（type用&，interface用extends）；4.interface支持声明合并而type不支持；5.两者可互相继承；6.class可同时实现type和interface。虽然功能相似，但interface在早期版本错误提示更友好，团队通常优先使用interface，仅在声明非对象类型时使用t
2026-01-06 16:47:07
23
原创 前端 - Vue - - vue2与vue3的区别
本文对比分析了Vue2和Vue3的主要区别：1）响应式实现：Vue2使用Object.defineProperty递归劫持属性，Vue3采用Proxy代理；2）API风格：Vue2是选项式API，Vue3提供组合式API；3）打包工具：Vue2用Webpack，Vue3用基于Rollup的Vite；4）Diff算法：Vue2采用双指针交叉算法，Vue3优化为预处理+最长递增子序列；5）根节点：Vue2限制单根节点，Vue3支持多根节点；6）新增Suspense特性。这些改进使Vue3在性能、开发体验和灵活性
2025-09-18 10:00:26
1049
原创 前端 - vue3 - - 手写Proxy响应式原理
摘要：Proxy实现响应式的核心原理是劫持-追踪-触发。通过Proxy拦截对象属性的get/set操作：get时用WeakMap追踪依赖（以对象为键、属性名为值的键名存储副作用函数），set时触发对应副作用函数更新视图。WeakMap避免内存泄漏，Map和Set结构优化性能。递归处理嵌套对象属性，Reflect确保正确获取/设置值。整个过程实现对象属性的自动依赖收集和视图更新。
2025-08-26 09:30:00
464
原创 前端 - vue - - Echarts性能优化小技巧
echarts有很多种图表类型，我相信大部分项目都只是用到某几种图表，如果我们全部引入，打包时会导致echarts约几MB，但如果我们按需引入用到的图表，那打包后的echarts包大小就是按KB为单位的。除了示例里面的图表类型，我们应该还会用到其他类型，那么问题来了：用到其他图表时，我该怎么知道这个类型的图表在echarts内容叫啥名呢？我使用了SVG渲染器，因为SVG的渲染性能比Canvas的渲染性能要好，如果你的项目不需要什么非常复杂的渲染效果，推荐SVG渲染器。Echarts官方文档。
2025-08-25 16:57:53
308
原创 前端 - js - - 垃圾回收机制&内存泄漏&强/弱引用
JS垃圾回收机制通过"标记-清除算法"自动管理内存：从根对象开始标记可达对象，清除不可达对象释放内存。常见内存泄漏场景包括：未声明的全局变量、未清除的定时器/事件监听器、DOM引用残留、过度闭包等。解决方法包括使用严格模式、及时清除资源、置空变量等。JS提供WeakMap/WeakSet实现弱引用，当对象只有弱引用时会被正常回收，而强引用会阻止对象被回收。合理运用这些机制可有效避免内存泄漏问题。
2025-08-25 16:23:41
580
原创 前端 - JavaScript - - 宏任务&微任务详解
JavaScript事件循环中的任务分为宏任务（如setTimeout、UI渲染）和微任务（如Promise.then）。执行顺序为：process.nextTick > 当前宏任务 > 微任务 > 下一宏任务。通过合理利用这两种任务可以优化性能：将非关键任务推迟到宏任务队列，将UI更新聚合到微任务队列减少重绘，以及将长数组任务切片异步执行避免卡顿。典型场景题展示了同步任务、微任务和宏任务的执行顺序差异，如Promise构造函数同步执行而.then异步执行。掌握这些机制有助于提升前端渲染性
2025-07-16 16:35:55
1151
原创 前端 - - vue - nextTick原理解读
Vue的nextTick机制解析：该机制将回调延迟到DOM更新后执行，确保获取最新DOM。Vue2采用多级降级策略（Promise/MutationObserver/setTimeout），通过任务队列管理回调；Vue3则统一使用Promise。主要差异在于：Vue2需处理兼容性，Vue3返回Promise支持async/await。典型使用场景包括数据更新后获取DOM状态，通过nextTick(()=>{})或await nextTick()实现。
2025-07-10 09:30:00
302
原创 服务器 - - QPS与TPS介绍
本文介绍了系统性能的两个关键指标：QPS（每秒查询数）和TPS（每秒事务数）。QPS衡量接口或数据库每秒处理的请求量，计算公式为总请求数/请求时间；TPS则用于业务场景，计算每秒完成的事务数。影响QPS的因素包括服务器性能、网络和代码效率；影响TPS的因素涉及数据库事务锁、分布式事务等。文中指出一个TPS可能包含多个QPS，并提供提升两者的优化方案：提高QPS可通过缓存、代码优化、负载均衡等方法；提升TPS则需数据库优化、减少锁竞争、改进事务模型等手段。这两个指标对评估系统吞吐量和业务处理能力至关重要。
2025-07-04 12:06:30
487
原创 SRE - - PV、UV、VV、IP详解及区别
网站流量指标解析：PV（页面浏览量）统计页面刷新次数；UV（独立访客数）按IP或Cookie去重计算；VV（访问次数）记录每次完整访问；IP仅统计独立地址。PV高需扩容服务器，UV突降可能服务器故障，PV暴增警惕爬虫攻击。不同指标反映不同维度的访问情况，需综合运用分析网站流量。（150字）
2025-07-04 11:03:05
746
原创 前端 - vue3 - - intersectionObserver
intersectionObserver用于异步观察dom元素与在页面中的显示状态，可配置其参数决定 dom元素显示的交叉状态而触发回调函数基础用法：new IntersectionObserver(callBack,options)
2025-05-30 09:00:00
250
原创 前端 - js - - innerWidth、clientWidth、offsetWidth、scrollWidth的区别
vw、vh等同于innerwidth 只会拿视口宽度实现自适应 与页面是否有滚动条无关。作用对象为浏览器视口 表示浏览器可见窗口宽度 如果有滚动条 则包含滚动条宽度。想获取浏览器的视口宽度做动态计算的话 就用innerwidth。作用对象为dom元素 表示内容宽度+内边距 不包含滚动条宽度。作用对象为dom元素 表示内容宽度+内边距+边框+滚动条宽度。作用对象为dom元素 表示内容页面宽度（溢出部分）+ 内边距。
2025-05-29 09:00:00
351
原创 前端 - vue - - vue中如何获取环境变量以及import.meta.env和process.env的区别
import.meta的运行环境是浏览器 属于浏览器特性 而process的运行环境是服务端（node、ssr） 所以我们在VUE3项目中使用process获取环境变量是不可以的
2025-04-08 09:30:00
1537
原创 前端 - vue3 - - toRef与toRefs的区别
toRefs作用对象单个属性包含所有属性的对象返回值单个ref对象所有属性为ref对象的普通对象应用场景只需要获取单个响应性对象需要将普通对象中的所有属性以响应性对象形式解构出来目标对象不存在时返回值为undefined的ref对象报错。
2025-03-31 09:17:38
412
原创 前端 - vue3 - - getCurrentInstance详解以及为什么不推荐使用
鱿鱼原话：直接访问实例会绕过vue3的响应式系统 不符合vue3的中心思想（解耦和复用性），getCurrentInstance已经在最新的文档说明中移除 是因为它作为一个内部api 不应该被公开使用 只会用于vue3生态中某些测试库
2025-03-29 09:30:00
1229
原创 前端 - css - - calc 计算属性函数
用于在css中动态计算数值 width: calc(计算式) 计算式中的单位支持%、px、vw、vh、rem、em等支持运算符+、-、*、/ 遵循数据数学运算中的计算优先级clac可嵌套使用实现更复杂的运算
2025-03-28 09:34:35
726
原创 前端 - ts - - declare声明类型
在使用typeScript的项目中 需要声明属性类型 单独的局部属性 可以直接在当前文件中声明 全局属性需要在项目根目录下新建.d.ts文件 vite会自动识别.d.ts类型文件在该文件中使用declare声明类型有三种写法1、在某种类型的文件中声明2、声明window上的属性类型3、全局声明
2025-03-28 09:30:00
929
原创 前端 - vue3 - - 挂载全局方法
1、provide、inject作为全局通信桥梁 也可以全局传输方法 provide接收两个参数 key和value inject接收一个参数 keyprovide 和 inject 本身不具有响应式 但可以配合响应式api实现响应式
2025-03-27 09:00:00
1124
原创 前端 - css - scss的for循环
合理的运用scss的for循环可以极大程度上减少代码冗余 比如宽高、内外边距一般会在src下新建style文件夹 里面再建index.scss 在里面写scss的样式配置。
2025-03-19 09:43:38
818
1原创 前端 - uniapp - - 分包
我之前遇到过node_modules/uni.modules里的组件库也被打进主包了 导致主包的体积干到了几十M 最后发现是我在index.scss中定义了一个font-family字体 会将ttf格式的字体资源文件编译成base64打包进所有的css文件中 包括依赖中的组件库 最后只能放弃这个字体了。除了分包 还要注意小程序的静态资源（static中的图片之类的）也会占用主包空间 静态资源要放在服务端。“root”是从根目录下的路径开始找 每一个root就是一个分包 注意分包的体积也不要大于2M。
2025-03-12 08:48:42
561
原创 后端 - java - - 数据类型
范围-9,223,372,036,854,775,808（-2^63）~9,223,372,036,854,775,807（2^63 -1）用于整数非常大的项目中 定义时默认加上L更加规范：long a = 100000L。int：32位 有符号 二进制补码表示的整数 默认为0 范围-2,147,483,648（-2^31）~2,147,483,647（2^31 – 1） 包装类：Integer。byte：8位 有符号 二进制补码表示的整数 默认为0 范围 -128（-2^7）~127（2^7-1）
2025-03-12 08:48:16
858
原创 后端 - java - - 重写与重载的区别
java中重写和重载是两个完全不同的概念 只不过他俩的名字相似 所以可能会分不清楚。重写的访问修饰符不能低于父类的级别（例如，如果父类方法是。）子类的异常声明必须与父类的异常声明相同或是其子类。同一个方法重复多次以实现不同类型传参。方法名、功能相同，参数类型、个数不同。子类重新写父类的方法，实现不同功能。重载的访问修饰符和异常声明可以不同。方法名、参数相同，功能不同。，子类方法至少也应该是。
2025-03-11 09:33:14
347
原创 前端 - uniapp - - 滚动容器scroll-view实现横向滚动
的样式，但是我在使用时发现按照官方文档说明给了配置后 依然无法实现滚动效果 在一行中放不开的dom会被挤到下一行 所以我们要再给一个强制不换行的样式。scrollview相当于给div加上了overflow-x: auto;属性 想要实现横线滚动 官方文档有说明需要配置。微信开放平台 scrol-view 的官方文档说明。为true 并其需要给高度和。
2025-03-11 09:01:23
901
原创 前端 - npm - - npm安装依赖时 -d -s -g的区别
1、-d（-save-dev）将依赖安装至开发环境中 在package.json的devDependencies中 如eslint、less这些只在开发环境中使用的依赖2、-s（-save）将依赖安装至生产环境中 在dependencies中，如elementui3、-g（-global）全局安装 将依赖安装至windows目录下
2025-03-07 17:20:00
304
原创 前端 - vue - - import引入报错 require引入不报错 package.json中type的用法 延迟导入资源
延迟导入资源 昨天面试被问到了 没答出来 今天特意来学习.."type":"module" // 项目中的 .js 文件将默认被视为 ESMAScript 模块 (ESM/ES6)。//未定义type 项目中的 .js 文件将默认被视为 CommonJS 模块 (CJS)。
2025-03-07 17:06:56
583
原创 前端 - js - - Promise
当两个操作（其中第一个或两个都是异步操作）需要同步执行时，第二步操作需要拿到第一步的接口 那我们就需要等待第一步异步操作执行完后再执行第二步操作，这时就需要用到promise。Promise本身是同步的 只是解决异步操作的容器 但其提供的then和catch方法是异步的 自身有两个api resolve成功的回调 reject失败的回调。promise有提供两个常用api all、race（其他api我实在没遇到需要用的地方 如果想了解 请移驾其他文章）promise的使用场景？
2025-03-06 14:26:43
281
原创 前端 - js - - es6新特性（高频面试题）
tab键上面的那个键 和普通字符串使用方式没区别 但多了一项功能 ${ } 可以在${ }中引用变量 代替传统字符串写法："我是字符串 我有一个变量" + value + "这个就是我的变量" 使用模板字符串：`我是模板字符串 我有一个变量${value}这个就是我的变量`1.let定义变量 const定义常量 即let定义的属性可以修改 const定义的属性不可修改 引用数据类型可修改值 不可修改内存地址。2.let定义的属性可不赋值 const定义的属性必须赋值。可在直接定义返回对象中的某个属性。
2025-03-06 13:59:02
489
原创 前端 - vue - - 大文件切片上传
在上传功能中 大文件（几十、几百兆）用常规上传方法会导致接口超时 此时我们需要将大文件切成n段上传注意：我定义的是10M为一片段 如过所上传的文件小于10M则会报错 所以上传前要先判断文件是否大于单个片段的大小 如过小于 就走普通上传
2025-03-05 11:34:31
195
原创 前端 - vue - - elementui上传文件组件封装
elementui的upload控件提供了各种配置 我们需要用到的有 list-type（文件列表表现类型）、file-list（绑定的文件数据）、limit（限制上传个数）、accept（限制上传类型）、before-upload（上传前的回调）、http-request（自定义上传）、on-remove（移除时的回调）、v-loading（加载中效果 看需求而定）
2025-03-05 11:16:48
1265
原创 前端 - uniapp - - 获取formdata对象上传文件
场景：小程序中选择图片/文件 上传至服务器时，接口要求前端传formData对象但小程序中没有formData对象 所以我们在使用new FormData()时会报错，而uniapp提供了一个上传文件的api可以获取formData对象https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile
2025-03-04 11:24:59
930
原创 前端 - vue - - 浏览器缓存LocalStorage、SessionStorage、Cookie
关于cookie有一个重要用途：因为cookie存储在服务端 所以统一域名下的所有服务都可以共享cookie 我们可以根据这一特性 模拟单点登录效果：
2025-03-04 11:10:51
1485
原创 前端 - css - - 实现元素水平垂直方向居中
6、根据父元素大小设置 margin 使外边距等于父元素大小减去盒子大小（垃圾写法 不推荐）5、图片居中：vertical-align: center。4、文字居中： text-align: center。
2025-03-03 11:31:51
226
原创 前端 - css - - flex布局
前端开发必备技能：页面自适应 实现页面自适应的方法有多种 我个人认为最常用最方便的方法就是使用flex属性 可以实现几乎所有场景的布局
2025-03-03 11:20:36
548
原创 前端 - js - - 数据类型
1、基本数据类型（简单数据类型）：string（字符串）、number（数字）、boolean（布尔值）、null（空）、undefined（未定义）、2、引用数据类型（复杂数据类型）：object（对象）、array（数组）、function（函数）、date（日期）、regexp（正则）、因map严格控制键名 并且其因独特的api（.set、.get）当频繁操作键名的时候 性能更优。1、object可通过字面量、构造函数、.create定义 map只能通过构造函数定义。、bigint（整数）
2025-02-28 17:56:56
351
原创 前端 - uniapp - - 小程序实现登录
小程序中有独立的一套登录流程 简单来说就是 前端调用特定api获取临时凭证 把这个临时凭证和小程序的信息传给后端 后端再去调小程序指定的登录接口
2025-02-27 09:32:36
614
原创 前端 - uniapp - - 自定义组件
在日常开发中 会遇到因某个组件高复用性 要将该组件封装起来 在vue中 封装好的组件在全局注册后 可以不用再在某个vue文件中单独引入 而在uniapp中改怎样全局注册组件呢？
2025-02-27 09:02:36
458
原创 前端 - js - - 箭头函数介绍
总结：日常开发中 箭头函数写法简洁 在vue中 可轻松获取当前vue实例 如果想更深层次了解箭头函数 可移步其他文章。( ) => { } 箭头函数是es6的一个新特性 它就是简化版的匿名函数（es6新特性初级高频面试题）( ( ) => { console.log( "我是立即执行函数" ) } )( )const fn = () => clonsole.log("我只有一行")箭头函数的this 指向的是父级的this。1、执行语句只有一行时可省略 { }箭头函数与普通函数最大的区别就是。
2025-02-26 16:13:53
203
原创 前端 - vue - vuex的使用
vuex通常作为vue2项目中跨组件通信的桥梁（vue3中常用pinia） 其有五个api：state（定义变量）、getters（监听变量）、 mutations（处理同步方法）、actions（处理异步方法）、moudels（将vuex分为多个板块）
2025-02-26 15:46:14
1024
原创 前端 - vue - - vue2与vue3的生命周期
vue实例初始化时执行，替代vue2中的beforeCreate和created。（vue3.0需手写setup，3.2自带setup语法糖）
2025-02-25 10:01:59
311
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人