- 博客(686)
- 收藏
- 关注
RSS订阅原创 css 中，backdrop-filter: blur(10px) 作用
浏览器兼容性：几乎所有现代浏览器（Chrome、Firefox、Safari、Edge 等）都已支持，但需注意部分低版本浏览器（如 IE）完全不支持该属性。这种效果常见于导航栏、弹窗、卡片等组件，既能让元素与背景产生层次感，又能隐约透出背后内容，增强视觉通透性，是现代 UI 设计中常用的高级效果。，创造出“毛玻璃”或“磨砂玻璃”效果。是一个视觉效果属性，它的主要作用是。
2025-11-20 09:38:22
143
1
原创 css 中 width: fit-content 作用
是 CSS 基本盒模型中的关键字，在现代浏览器中（包括 Chrome、Firefox、Safari 等）均有良好支持，无需添加前缀。元素的宽度会刚好包裹内部内容，并且在父容器中水平居中，非常适合用于按钮、标签、卡片等需要“内容决定宽度”的场景。那样可能撑满父容器，也不会像固定宽度（如。）那样限制内容展示。
2025-11-19 00:07:05
550
原创 网络请求的 content-type 有几种类型，分别有什么用
用于表示请求体（Request Body）的数据格式，服务器会根据该类型正确解析数据。能确保服务器正确解析数据，避免出现解析错误（如 JSON 数据用。在 HTTP 网络请求中，提交会导致解析失败）。
2025-11-19 00:06:32
508
原创 图片跨域，img 标签可以访问吗
场景img 标签是否可访问关键限制仅展示跨域图片✅ 可以无（直接加载渲染）加载后用 JS 操作图片❌ 受限制触发 CORS 拦截，需服务器配置+前端 crossOrigin跨域图片绘制到 canvas❌ 受限制canvas 被污染，无法读取像素数据“看图片”随便跨域，“改/读图片”必须过 CORS。实际开发中需根据业务需求（仅展示/需操作）决定是否配置跨域规则。
2025-11-18 17:24:42
402
原创 new Set 用法
是 JavaScript 中用于创建集合（Set）对象的构造函数，它主要用于存储。（不允许重复），可以是任何数据类型（原始值或对象引用）。注意：Set 中判断值是否相等的方式与。Set 是可迭代对象，可以直接使用。被认为与自身相等（而。结果为 false）。
2025-11-18 17:24:06
129
原创 vue2 和 vue3 中，列表中的 key 值作用
在 Vue 2 和 Vue 3 中，key是一个特殊的 attribute，主要用于帮助 Vue 的虚拟 DOM 算法识别哪些元素被修改、添加或删除。以下是key。
2025-11-17 23:22:13
198
原创 vue2 和 vue3 中，provide 和 inject 用法
API 形式：Vue 3 同时支持选项式和组合式 API，Vue 2 仅支持选项式响应式处理：Vue 3 中提供 ref/reactive 可以直接保持响应性，Vue 2 需手动处理默认值设置：Vue 3 组合式 API 中通过第二个参数直接设置默认值，更简洁类型支持：Vue 3 对 TypeScript 有更好的支持，可通过泛型指定注入类型在实际开发中，provide和inject适合传递应用级别的配置或深层嵌套组件间的通信，但不推荐过度使用，以免组件耦合度过高。
2025-11-17 23:21:12
949
原创 vue3 中 defineProps、defineEmits、defineExpose、defineOptions、defineSlots、useSlots、useAttrs 分别有什么作用
这些 API 是 Vue 3：处理组件间通信（父传子/子传父）。：控制子组件向父组件暴露的内容。：定义组件元选项（如名称）。：为插槽提供类型定义（TypeScript）。useSlotsuseAttrs：在组件内部访问插槽和非 props 属性。掌握这些 API 可以更高效地使用语法开发 Vue 3 组件。
2025-08-26 23:24:06
806
原创 vue2 和 vue3 生命周期的区别
核心逻辑不变：无论是 Vue 2 还是 Vue 3，生命周期的核心阶段（初始化、挂载、更新、卸载）和钩子的作用本质一致，只是命名和使用方式调整。Vue 3 的优化用setup统一初始化逻辑，简化代码；销毁阶段钩子重命名为“卸载”（unmounted），语义更清晰；组合式 API 中通过onXxx函数注册钩子，支持按功能拆分代码（如“数据请求+DOM 操作”可放在同一个onMounted中，无需分散在选项式的不同钩子）。迁移建议：若从 Vue 2 迁移到 Vue 3，选项式 API 只需将。
2025-08-26 23:23:35
876
原创 vue2 和 vue3 中，插槽、具名插槽、插槽传参用法
类型Vue 2 语法Vue 3 语法核心变化具名插槽用slot="名称"属性用<template v-slot:名称>或#名称废弃slot属性，改用v-slot作用域插槽用slot-scope接收数据用v-slot:名称="变量"接收数据废弃slot-scope，合并到v-slot默认插槽直接写内容或直接写内容或#default语法更简洁，推荐显式<template>注意：Vue 3 对插槽语法做了标准化，更强调结构化和一致性，同时保持了核心功能不变。迁移时需注意将slot属性和。
2025-08-25 00:46:13
711
原创 vue2 和 vue3 中，watch 和 watchEffect 的区别
watch更灵活，需手动指定监听源，可获取新旧值，适合精确控制的场景。更简洁，自动追踪依赖，默认初始执行，适合副作用逻辑较简单的场景。是 Vue 3 新增 API，Vue 2 中无法使用。
2025-08-25 00:45:41
468
原创 在 vue3 和 vue2 中，computed 计算属性和 methods 方法区别是什么
特性computed 计算属性methods 方法缓存有缓存，依赖不变则不重新计算无缓存，每次调用都重新执行调用方式模板中直接用属性名（不加括号）模板中需加括号（作为函数调用）适用场景数据派生、过滤、格式化（需频繁访问）事件处理、业务逻辑（无需缓存）依赖追踪自动追踪依赖，依赖变化自动更新不追踪依赖，需手动调用才执行computed 是“带缓存的派生属性”，methods 是“无缓存的函数”。根据是否需要缓存和使用场景选择：需要缓存且基于响应式数据派生新数据时用computed。
2025-08-24 17:15:30
449
原创 在 vue3 和 vue2 中，v-for 和 v-if 可以一起用吗，区别是什么
场景Vue 2Vue 3优先级同一元素使用效果先循环后判断（有性能问题）报错（v-if 无法访问循环变量）推荐用法用计算属性过滤数据用计算属性过滤数据控制整个列表显示需额外处理可在父元素用 v-if 控制核心结论：无论 Vue 2 还是 Vue 3，都不推荐在同一元素上同时使用 v-for 和 v-if，最佳实践是通过计算属性预处理数据，既保证性能又避免逻辑混乱。
2025-08-24 17:02:16
628
原创 26. Object.defineProperty 和 Proxy 用法
和Proxy都是 JavaScript 中用于实现数据劫持和响应式系统的重要 API，它们在 Vue 等前端框架中被广泛使用。
2025-08-17 14:23:32
417
原创 24. async await 原理是什么，会编译成什么
是 JavaScript 中用于简化异步编程的语法糖。async函数会返回一个Promise对象。await会暂停async函数的执行，直到Promise被resolve或reject。在底层实现中，会被编译为基于Promise和生成器（Generator）的状态机。
2025-08-16 21:58:55
864
原创 23. CommonJS 和 ES6 Module 区别
CommonJS是 Node.js 中使用的模块化规范，适用于服务端。是 ECMAScript 2015 引入的官方模块化标准，适用于浏览器和现代 Node.js 环境。主要区别如下：加载时机不同：CommonJS 是运行时加载，ES6 Module 是编译时加载。输出方式不同：CommonJS 输出值的拷贝，ES6 Module 输出值的引用。使用语法不同：CommonJS 使用require和，ES6 Module 使用import和export。
2025-08-16 21:57:41
636
原创 22. defer 和 async 区别是什么
defer和async都是<script>标签的属性，用于控制外部脚本的加载和执行行为。主要区别在于：defer：脚本在HTML 解析完成后事件触发前按顺序执行。async：脚本下载时不阻塞 HTML 解析，下载完成后立即执行执行顺序不确定。## 对比表格| 特性 | `defer` | `async` || 是否阻塞 HTML 解析 | ❌ 不阻塞 | ❌ 不阻塞 || 下载时是否保持顺序 | ✅ 是 | ❌ 否 |
2025-08-15 00:35:22
283
原创 21. JIT 有了解吗
JIT（Just-In-Time Compilation）即时编译是一种在程序运行时将字节码或中间语言（如 JavaScript）动态编译为机器码的技术。在 JavaScript 引擎中（如 V8、SpiderMonkey、JavaScriptCore），JIT 用于提升代码执行性能。与传统的解释执行相比，JIT 可以显著提高运行速度，接近原生代码的性能。JIT（Just-In-Time Compilation）即时编译，是一种运行时编译优化技术程序开始运行时采用解释执行；
2025-08-15 00:33:37
309
原创 20. 了解过尾递归优化吗
尾递归（Tail Recursion）是一种特殊的递归形式，函数的最后一步仅返回递归调用的结果。在严格模式下，ES6 引入了尾调用优化（Tail Call Optimization, TCO），可以避免递归调用栈无限增长，从而优化性能和内存使用。尾递归优化不是所有 JavaScript 引擎都支持，使用时需注意兼容性。如果一个函数的最后一步仅仅调用另一个函数并返回其结果，则该调用称为尾调用。// ✅ 尾调用// ✅ 也是尾调用// ❌ 不是尾调用（最后一步是加法）
2025-08-14 22:07:32
404
原创 19. 什么是 TypedArray
TypedArray（类型化数组）是 JavaScript 中用于操作二进制数据的特殊数组。它提供了对的结构化访问，用于处理原始二进制数据，如图像、音频、网络协议等。Int8ArrayUint8ArrayInt16Array等。TypedArray是的“视图”，不直接操作内存，而是通过DataView或TypedArray本身。
2025-08-14 22:06:36
487
原创 16. 什么是可迭代对象
可迭代对象（Iterable Object）是指实现了方法的对象。可以使用for...of循环进行遍历。ArrayStringMapSetargumentsNodeList等。普通对象（Object）默认不是可迭代的，但可以通过自定义实现。return {next() {} else {},},// 输出 10, 20, 30。
2025-08-12 00:15:39
414
原创 15. xhr 对象如何发起一个请求
（简称 XHR）是浏览器提供的用于发送 HTTP 请求的 JavaScript 对象。常用于实现 AJAX 请求，实现页面局部刷新或与后端进行数据交互。基本流程包括：创建对象、配置请求、设置回调、发送请求。xhr.send();
2025-08-12 00:06:21
431
原创 14. window.onload 和 document.ready
是原生 JavaScript 提供的事件，表示整个页面（包括图片、脚本等资源）加载完成后触发。是 jQuery 提供的方法，表示 DOM 结构加载完成后即可执行，无需等待所有资源加载完成。比更早执行。
2025-08-11 00:22:40
401
原创 13. encodeURL 和 decodeURL 作用是什么
encodeURL 和 decodeURL 函数作用是编码和解码 URL。## 函数说明| 函数名 | 描述 || `encodeURL` | 将字符串作为 URL 进行编码，不会对 `:`、`/`、`;`、`,`、`?` 等符号进行编码。| `decodeURL` | 将已编码的 URL 字符串解码为原始字符串。## 示例代码### 编码 URL// 输出: https://example.com?```
2025-08-11 00:20:44
378
原创 12. 闭包有什么作用
闭包是函数和其作用域的结合，可以访问并保持外部作用域中的变量；主要作用：延长作用域链、数据封装、函数工厂、模块化开发；优点：封装性强、可维护性高；缺点：可能导致内存占用过高或内存泄漏；使用建议：合理使用闭包，注意及时释放引用，避免不必要的闭包嵌套。✅建议：在需要封装数据、保持状态或实现模块化时优先使用闭包，同时注意性能和内存管理。闭包是 JavaScript 的核心特性之一，广泛应用于函数式编程、模块化开发、数据封装等场景。
2025-08-10 00:35:57
958
原创 11. 怎么实现浅拷贝
扩展运算符{...obj}手动实现函数✅建议：在不需要嵌套复制的场景中使用浅拷贝，如快速复制对象、合并配置等。如需完全独立的副本，请使用深拷贝。在 JavaScript 中，浅拷贝是指创建一个新对象，使其属性与原对象相同，但如果属性值是引用类型（如对象或数组），则复制的是引用地址，而不是创建新的对象。因此，原对象和新对象会共享嵌套对象的数据。快速复制对象或数组不需要深度隔离的场景作为深拷贝的基础步骤。
2025-08-10 00:34:20
591
原创 10. 怎么实现深拷贝？
简单场景：使用学习/教学：使用递归实现 + 循环引用处理生产环境：优先使用浏览器端（现代）：使用✅建议：在开发中优先使用成熟的库（如lodash），避免重复造轮子。如需自定义实现，应考虑特殊类型、循环引用、性能等问题。在 JavaScript 中，深拷贝是指创建一个新对象，使其与原对象完全独立，互不影响。与之相对的是浅拷贝，只复制引用地址，原对象和新对象共享内部引用的数据。状态快照保存（如撤销/重做功能）数据隔离（避免修改原始数据）跨组件通信时的数据传递。
2025-08-09 23:05:05
566
原创 9. 堆和栈有什么区别
栈：用于存储基本数据类型，速度快，生命周期明确；堆：用于存储引用类型，空间大但访问慢，依赖垃圾回收机制；JavaScript 中变量的存储方式取决于其类型；理解堆栈机制有助于优化代码性能、避免内存泄漏。✅建议：在开发中合理使用基础类型和引用类型，注意变量作用域和引用关系，以提升应用性能和稳定性。在 JavaScript 中，堆（Heap）和栈（Stack）是两种不同的内存分配区域，用于存储程序运行时的数据。理解它们的区别有助于我们更好地理解变量存储机制、性能优化以及垃圾回收机制。栈是一种。
2025-08-09 23:02:43
1007
原创 8. split 和 join 的区别
split()是字符串的方法，用于将字符串按分隔符拆分为数组；join()是数组的方法，用于将数组元素拼接为字符串；两者常配合使用，实现字符串与数组之间的互转；掌握它们的使用可以简化字符串处理、数据解析等任务。✅建议：在处理字符串与数组转换时，优先考虑使用split()和join()，它们简洁高效，是前端开发中非常实用的工具方法。在 JavaScript 中，split()和join()是字符串和数组的常用方法，它们在字符串与数组之间进行转换时非常有用。方法名所属对象功能作用。
2025-08-08 00:05:25
564
原创 7. 什么是事件委托
事件委托是利用事件冒泡机制，将事件监听器绑定在父元素上，通过判断实际触发事件的子元素。它可以显著减少事件监听器数量，提升性能，尤其适用于动态内容和大量子元素。事件委托是现代前端开发中常用的优化手段之一，建议在列表、表格、菜单等场景中优先使用。✅建议：合理使用事件委托，避免直接绑定过多事件监听器，提升页面性能和可维护性。事件委托是一种利用事件冒泡机制的前端优化技巧。将事件监听器绑定在父元素上，而不是每个子元素单独绑定，然后通过来判断具体触发事件的子元素。
2025-08-08 00:04:04
577
原创 6. 什么是事件冒泡和事件捕获
事件冒泡：从目标元素向上触发父元素的事件监听器；事件捕获：从最外层向下触发，再到目标元素；默认情况下，事件在冒泡阶段触发；使用可以在捕获阶段监听；事件委托是基于冒泡的常用优化手段；可以阻止事件传播，但应谨慎使用。✅建议：根据实际需求选择在冒泡或捕获阶段监听事件，合理使用事件委托，提升性能和可维护性。在 JavaScript 中，事件冒泡（Bubbling）和事件捕获（Capturing）是 DOM 事件传播的两个阶段。理解这两个阶段有助于我们更精确地控制事件的触发顺序，特别是在嵌套元素中。
2025-08-07 00:32:43
1088
原创 5. typeof 和 instanceOf 区别
typeof适用于判断基本数据类型，返回字符串；instanceof适用于判断引用类型是否是某个类的实例，返回布尔值；是历史遗留问题；instanceof依赖原型链，支持继承判断；推荐结合使用typeof和instanceof，根据具体场景选择合适的方式。✅建议：在开发中，使用typeof判断基本类型，使用instanceof或判断引用类型，避免类型判断错误。在 JavaScript 中，typeof和instanceof都是用于判断数据类型的运算符，但它们的使用场景和判断方式完全不同。
2025-08-07 00:28:55
530
原创 4. new 发生了什么？
使用new创建一个空对象；设置空对象的原型链指向构造函数的prototype；执行构造函数，将空对象作为this；返回新对象（或构造函数返回的对象）。✅建议：理解new的原理有助于我们编写更清晰的面向对象代码，并能更好地模拟或扩展 JavaScript 的类和继承机制。在 JavaScript 中，new是用于创建对象的关键字，它会调用一个构造函数并返回一个新创建的对象。理解new的执行过程有助于我们深入掌握原型、构造函数、对象创建机制等核心概念。${this`);
2025-08-06 00:13:13
460
原创 3. 为什么 0.1 + 0.2 != 0.3
底层是二进制实现在 JavaScript 中，0.1 + 0.2的结果并不是精确的0.3，而是。这个现象并不是 JavaScript 的“bug”，而是由于浮点数在计算机底层的二进制表示方式导致的精度丢失问题。
2025-08-05 23:06:52
608
原创 2. JS 有哪些数据类型
基础类型（7 种）numberstringbooleannullundefinedsymbolbigint引用类型（对象及其子类）objectarrayfunctiondateregexpmapset等基础类型：使用typeof引用类型：使用instanceof或✅最佳实践：使用实现最通用的类型判断逻辑。
2025-08-05 23:05:33
771
原创 1. 什么是柯里化
柯里化是将多参数函数转化为一系列单参数函数的技术。它有助于参数复用、函数组合、延迟执行等场景。在函数式编程中，柯里化是构建可维护、可组合代码结构的重要工具。推荐使用通用curry函数来自动处理柯里化过程，提高开发效率。✅建议：在构建可复用的工具函数或进行函数组合时，优先考虑使用柯里化来提升代码的灵活性和可读性。柯里化（Currying）是函数式编程中的一个重要概念，指的是将一个接受多个参数的函数转换为一系列接受单个参数的函数的过程。一次传一个参数，返回一个新函数来处理剩下的参数。
2025-08-04 23:49:22
693
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人