- 博客(1032)
- 收藏
- 关注
RSS订阅转载 什么是 WeakRef？
上面示例中，target是原始对象，构造函数WeakRef()创建了一个基于target的新对象wr。这里，wr就是一个 WeakRef 的实例，属于对target的弱引用，垃圾回收机制不会计入这个引用，也就是说，wr的引用不会妨碍原始对象target被垃圾回收机制清除。注意，标准规定，一旦使用WeakRef()创建了原始对象的弱引用，那么在本轮事件循环（event loop），原始对象肯定不会被清除，只会在后面的事件循环才会被清除。上面示例中，deref()方法可以判断原始对象是否已被清除。
2025-08-20 21:11:48
2
转载 globalThis 全局对象
它提供了一种标准化的方式来访问全局作用域（global object），无论代码在何种环境中运行（浏览器、Node.js、Web Workers 等）。： 在模块化代码（如 ES Modules）中，直接使用顶层作用域变量不会污染全局对象，此时。：优先使用模块化开发，避免污染全局作用域；： 在严格模式下，未声明的变量赋值会报错，但通过。：编写跨环境库、操作全局对象、环境检测等。显式修改全局对象，行为更清晰。替代传统全局对象访问。统一的全局对象访问方式。Polyfill 实现。
2025-08-08 19:38:36
19
转载 学习Vue源码中的makeMap 函数
makeMap` 返回一个函数，这种高阶函数的使用符合函数式编程的思想，使得生成的函数可以像普通变量一样传递和使用，增加了灵活性。时，生成的函数会将传入的值转换为小写后再进行查找，这样可以在创建映射表时只存储小写形式的键，而对外提供大小写不敏感的查找功能。的创建中，虽然没有使用小写转换（因为传入的HTML标签列表都是小写，且调用时传入的标签名通常也是小写），但这一特性使得。对于像HTML标签这样固定的集合，使用这种静态的映射表非常合适，因为集合不会在运行时改变，所以可以一次性构建，多次使用。
2025-08-06 10:32:05
14
转载 在移动端使用 vw 布局
在移动端使用 vw（视口宽度单位）布局是一种高效、灵活的响应式适配方案。vw 单位定义： 1vw = 1% 的视口宽度（Viewport Width）13.33vw 表示 "元素宽度始终占屏幕宽度的 13.33%"设计稿上任何尺寸的元素，在不同屏幕上都保持相同的视觉占比。如：屏幕宽度 375px → 1vw = 3.75px。：750px（移动端常见设计稿尺寸）414px 宽手机 → 55.2px。768px 平板 → 102.4px。375px 宽手机 → 50px。推导100px对应的vw值。
2025-07-11 19:17:30
49
转载 h5禁止手指缩放页面
方法2：通过JavaScript阻止手势事件（增强兼容性）标签方案，针对iOS设备补充JS代码以达到最佳兼容效果。⚠️ 注意：iOS 10+的Safari浏览器会忽略。若页面包含地图等需缩放的功能，需局部放开限制。禁用缩放可能影响视障用户使用，需谨慎评估需求。：锁定缩放比例为1.0（即100%）iOS设备：需JS配合才能完全禁止。，需结合JS方法增强限制。：初始缩放比例为100%方法1：通过HTML的。
2025-07-10 10:01:45
120
转载 TypeScript 模板字符串类型
模板字符串类型显著提升了 TypeScript 的字符串操作能力，使类型系统能精确描述真实世界中的复杂字符串模式，大幅减少运行时错误。引入的核心特性，它允许开发者基于字符串字面量类型动态生成新类型，类似于 JavaScript 的模板字符串，但作用于类型系统层面。复杂模板可能触发类型递归深度限制（可通过。（URL/ID/日期等）（CSS 类名/事件名）（解析/转换/模式匹配）配合泛型实现高级类型推导。结合内置字符串工具类型。联合类型会展开所有组合。API 路径类型安全。类型安全的字符串操作。
2025-06-27 08:01:40
52
转载 介绍一下Rolldown，不是Rollup
通过标准化 AST 树（基于 Oxc），避免重复解析，显著减少 Vite 构建时的 AST 生成次数（原需 5 次以上解析的 TS 文件可降至 1 次）。它并非 Rollup 的衍生版本，而是一个全新的高性能替代品，专注于解决现代前端构建中的性能与生态兼容问题。对于急需生产级工具的场景，可暂用 Vite 现有方案，待 Rolldown 稳定后再迁移。：集成内置转换（TS/JSX）、代码压缩，并推动 Vite 核心 Rust 化。（字节跳动开源），集成其解析器、转译器等底层能力，未来计划支持代码压缩。
2025-06-26 10:17:25
165
转载 HTML常见的XSS攻击有哪些
攻击者将恶意脚本存储在目标服务器上，例如在数据库中。每当用户访问包含恶意脚本的页面时，脚本就会执行。恶意脚本直接在客户端通过修改页面的 DOM 来执行。以下是一些常见的 XSS 攻击示例，以及如何防御这些攻击的代码示例。：对所有用户输入进行验证，并在输出时进行适当的转义，以防止脚本执行。：使用成熟的库和框架，它们通常已经包含了防御 XSS 的机制。这种攻击通常发生在处理用户输入但未正确验证或转义的页面上。通过这些措施，可以有效减少 XSS 攻击的风险。：在服务器端和客户端都要对用户输入进行转义。
2025-06-19 21:35:57
55
转载 Vue3.5优化watch监听，使watch更加全面
中订阅外部资源（如事件监听器、计时器、网络请求等）时，您可能需要在 watcher 被停止或组件卸载时清理这些资源，以避免内存泄漏或不必要的副作用。它接收一个清理函数作为参数，该函数会在 watcher 被停止时自动调用。，您可以确保在不再需要观察某些数据时，适当地释放资源，保持应用的性能和稳定性。是一个用于在 watcher 被清理时执行清理逻辑的函数。并传入一个清理函数，该清理函数将在 watcher 被停止时执行。是在 watcher 停止时执行的，这可能在组件卸载前就发生。在 Vue 3 中，
2025-06-10 10:09:18
67
转载 计算属性稳定性
在 Vue 3.4 及更高版本中，计算属性仅在其计算值较前一个值发生更改时才会触发副作用。由于每次都会创建一个新对象，因此从技术上讲，新旧值始终不同。即使 isEven 属性保持不变，Vue 也无法知道，除非它对旧值和新值进行深度比较。这种比较可能代价高昂，并不值得。值得注意的是，你应该始终在比较和返回旧值之前执行完整计算，以便在每次运行时都可以收集到相同的依赖项。这减少了非必要副作用的触发。相反，我们可以通过手动比较新旧值来优化。
2025-05-27 09:59:12
33
转载 DOM 内模板解析注意事项
当使用在原生 HTML 元素上时，is 的值必须加上前缀 vue: 才可以被解析为一个 Vue 组件。这一点是必要的，为了避免和原生的自定义内置元素相混淆。由于浏览器的原生 HTML 解析行为限制，有一些需要注意的事项。将作为无效的内容被忽略，因而在最终呈现的输出中造成错误。以上就是你需要了解的关于 DOM 内模板解析的所有注意事项，同时也是 Vue 基础部分的内容。这是由于 HTML 只允许一小部分特殊的元素省略其关闭标签，最常见的就是。，相应的，某些元素仅在放置于特定元素中时才会显示，例如。
2025-05-26 09:36:43
59
转载 true-value 和 false-value 是 Vue 特有的属性
true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。true-value 和 false-value attributes 不会影响 value attribute，因为浏览器在表单提交时，并不会包含未选择的复选框。为了保证这两个值 (例如：“yes”和“no”) 的其中之一被表单提交，请使用单选按钮作为替代。此外，使用 v-bind 还使我们可以将选项值绑定为非字符串的数据类型。v-model 同样也支持非字符串类型的值绑定！
2025-05-25 10:39:43
57
转载 判断一个表达式是否存在语法错误
这两种方法均能有效检测表达式的语法正确性，根据项目需求选择最适合的方案。通过第三方库Acorn直接解析表达式，适合需要高准确性的场景。：确保表达式中的特殊字符（如反引号）不会破坏函数体结构。语句中，尝试创建新函数。若成功则无语法错误，否则捕获。：优先选择方法一，利用Node.js内置功能。：若需检测严格模式下的语法，可在函数体内添加。方法二：使用Acorn解析库（更精准）精准识别表达式，无需处理上下文（如。支持最新ECMAScript特性。：选择方法二，尽管需额外安装依赖。对象字面量需括号包裹。
2025-05-18 20:38:45
93
转载 介绍一下node中的qs模块
模块是一个用于解析和格式化查询字符串的流行库，尤其在处理复杂的嵌套对象时非常有用。模块是一个强大且灵活的工具，用于处理 URL 查询字符串。它特别适合需要处理复杂对象和数组的场景。，你可以更轻松地解析和格式化查询字符串，尤其是在处理嵌套数据结构时。提供了多种选项来控制解析和字符串化的行为。：将 URL 查询字符串解析为 JavaScript 对象。：将 JavaScript 对象转化为 URL 查询字符串。模块提供了更多的功能和更强大的解析能力。：可以处理复杂的嵌套数据结构。自定义解析和格式化选项。
2025-04-15 21:28:24
113
转载 get定义的属性是否是可枚举
Getter 默认不可枚举是 JavaScript 的设计决策，旨在保持对象结构的清晰性。若需强制可枚举，需通过。：类的方法（包括 getter）通常设计为不可枚举，以避免污染属性遍历结果（如。属性，因此默认情况下无法遍历到这些 getter。关键字在类内部定义的访问器属性（getter）默认是。由于 getter 在原型上且不可枚举，实例的。：若需获取对象属性（包括不可枚举的），可用。通过类语法定义的 getter 默认具有。循环会遍历对象自身及原型链上的所有。遍历对象自身及原型链上的可枚举属性。
2025-04-14 20:18:40
47
转载 Axios 请求传 ArrayBuffer 参数
类型的数据，可以通过设置请求头和配置适当的选项来确保数据以正确的格式发送。使用 Axios 发送请求，以下是一个例子，展示如何使用 Axios 发送一个包含。不同的服务器框架可能需要不同的配置或中间件来解析二进制请求体。数据时，你需要确保请求配置正确，以便 Axios 将响应数据解析为。，你可以根据数据的内容和格式进行处理。根据数据的具体格式和你的需求，选择合适的解析和处理方法。包含二进制数据（如图像或音频），你可以创建一个。首先，确保你的 Axios 请求配置包括。通常，当发送二进制数据时，需要设置。
2025-04-12 15:55:29
151
转载 组件通讯要注意内存泄露
特别是在组件销毁时，如果没有移除监听器，组件可能无法被垃圾回收，从而导致内存泄露。事件总线是一种轻量级的发布-订阅模式，通过创建一个空的 Vue 实例作为事件中心，兄弟组件可以在事件中心上监听和触发事件。通过在组件销毁时移除事件监听器，可以有效地避免内存泄露问题。一个兄弟组件可以通过事件将数据发送到父组件，父组件再将数据传递给另一个兄弟组件。触发一个事件，将数据传递给父组件。在父组件中，监听该事件并接收数据。在父组件中，将接收到的数据通过。在另一个兄弟组件中，使用。在一个兄弟组件中，使用。
2025-04-10 19:46:28
59
转载 检查一个对象是否是 Proxy
在 JavaScript 中，没有内置的方法直接判断一个对象是否是 Proxy 对象。Proxy 对象是通过 new Proxy(target, handler) 创建的，它没有暴露任何直接的标识符来判断对象是否为 Proxy。Vue3 中提供 isProxy() 方法，检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。Vue 在创建响应式 Proxy 对象时，会在对象上设置一个不可枚举的特殊标记。
2025-03-31 19:54:59
88
转载 理解 Vue3.5 的 useId 功能
每次调用 useId 时，都会取出当前的数字值，然后进行自增操作，从而确保每次生成的ID都是唯一的。https://github.com/vuejs/core/pull/11404 是否有计划在未来版本中扩展 useId 功能以在异步环境中工作？useId() 生成的每个 ID 在每个应用内都是唯一的。同一个组件的多个实例调用 useId() 也会生成不同的 ID。useId() 生成的 ID 在服务器端和客户端渲染之间是稳定的，因此可以安全地在 SSR 应用中使用，不会导致激活不匹配。
2025-03-23 17:33:29
114
转载 getCurrentInstance 原理是什么？
getCurrentInstance是 Vue 3 中的一个内部 API，主要用于在组合式 API（Composition API）中获取当前组件实例的引用。了解它的原理可以帮助你更好地理解 Vue 3 的内部工作机制。以下是关于getCurrentInstance的详细解释：工作原理1、组件实例上下文：•在 Vue 3 中，每个组件在创建时都会有一个与之关联的组件实例对象。这个对象包含了...
2025-03-09 09:03:14
228
转载 Vue3 数渲染函数API如何使用
在 Vue 3 中，渲染函数提供了一种使用 JavaScript 来构建组件模板的方式。与模板语法相比，渲染函数提供了更多的动态性和灵活性。以下是如何使用 Vue 3 渲染函数 API 的一些基本步骤和示例：基本用法在 Vue 3 中，渲染函数可以通过render选项来定义。你可以在render函数中使用h函数（也称为createElement函数）来创建虚拟 DOM 节点。示例&...
2025-03-08 19:49:59
76
转载 查看 npm 安装的全局包
要查看通过npm安装的全局包，可以使用以下方法：方法 1：使用npm list -g --depth=0运行以下命令，可以列出所有全局安装的 npm 包：npm list-g--depth=0•-g表示列出全局安装的包。•--depth=0表示只列出顶层的包（不显示依赖的嵌套结构）。输出示例：/usr/local/lib├── npm@9.8.0├── nodemon@2.0.22├...
2025-02-19 09:55:45
471
转载 @vue/compiler-core整体逻辑
@vue/compiler-core是 Vue 3 中的一个关键模块，用于将 Vue 模板编译为渲染函数。它的整体逻辑可以分为几个主要阶段：解析（Parsing）、转换（Transformation）、优化（Optimization）和代码生成（Code Generation）。下面是对这些阶段的详细介绍：1. 解析（Parsing）目标：将模板字符串解析为抽象语法树（AST）。•输入：Vue ...
2025-02-16 10:35:22
160
转载 v-exposure 元素曝光
要在 Vue 中创建一个自定义指令，用于元素曝光上报埋点，可以使用IntersectionObserverAPI 来检测元素何时进入或离开视口。以下是一个示例，展示如何实现这个功能：Vue.directive('exposure', { inserted(el, binding) { // 创建一个 IntersectionObserver 实例 const observer =...
2025-01-20 19:06:00
93
转载 Symbol(Symbol.unscopables)
在 Vue 源码中，Symbol(Symbol.unscopables)是一个与 JavaScript 的标准Symbol.unscopables相关的特殊符号。要理解它的作用，我们需要从 JavaScript 的with语句和Symbol.unscopables的功能说起。Symbol.unscopables的作用Symbol.unscopables是 ES6 引入的一个内置 ...
2025-01-14 08:00:57
86
转载 createElementVNode 底层工具函数
createElementVNode是 Vue 3 中用于创建虚拟 DOM 节点（VNode）的一个底层工具函数。它是 Vue 内部用于渲染的核心函数之一，主要在编译模板时生成的渲染函数中被调用。在 Vue 3 中，createElementVNode是从vue包导出的，通常不需要手动使用它，因为 Vue 的模板语法会自动编译成调用类似createElementVNode的渲染函数。但...
2025-01-13 19:24:11
143
转载 副作用清理 onWatcherCleanup
有时我们可能会在侦听器中执行副作用，例如异步请求：watch(id,(newId) =>{fetch(`/api/${newId}`).then(() =>{ // 回调逻辑 })})但是如果在请求完成之前 id 发生了变化怎么办？当上一个请求完成时，它仍会使用已经过时的 ID 值触发回调。理想情况下，我们希望能够在 id 变为新值时取消过时的请求。我们可以使用 on...
2025-01-10 08:00:26
111
转载 前端如何管理JS内存
在前端开发中，管理 JavaScript 内存是优化性能、减少内存泄漏、提升用户体验的重要一环。以下是一些管理 JavaScript 内存的关键方法和最佳实践：1.理解 JavaScript 内存管理机制JavaScript 的内存管理主要依赖以下两个过程：•内存分配：当创建变量、对象、函数时，JavaScript 会自动分配内存。•垃圾回收：JavaScript 引擎（如 V8）会自动回收不再...
2025-01-09 19:34:32
100
转载 prefers-color-scheme CSS 特性
prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。语法1、no-preference 表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 false。2、light 表示用户已告知系统他们选择使用浅色主题的界面。3、dark 表示用户已告知系统他们选择使用暗色主题的界面。示例这个例子使用了一个有黑色背景和白色文字的元素，当用...
2025-01-08 19:12:48
150
转载 onunhandledrejection 捕获 Promise
当 Promise 被 reject 且没有 reject 处理器的时候，会触发 unhandledrejection 事件；这可能发生在 window 下，但也可能发生在 Worker 中。这对于调试和为意外情况提供后备错误处理非常有用。unhandledrejection 继承自 PromiseRejectionEvent，而 PromiseRejectionEvent 又继承自 Event。...
2024-12-24 09:27:35
300
转载 什么是源代码映射？
源映射的必要性早期的 Web 应用的复杂性较低。开发者直接将 HTML、CSS 和 JavaScript 文件部署到 Web 上。在开发工作流中，更现代、更复杂的 Web 应用可能需要使用各种工具。例如：1.模板语言和 HTML 预处理器：Pug、Nunjucks、Markdown。2.CSS 预处理器：SCSS、LESS、PostCSS。3.JavaScript 框架：Angular、React...
2024-12-23 08:00:13
81
转载 分析组件的渲染时间
在 Vue 应用中分析每个组件的渲染时间可以帮助开发者找出性能瓶颈并进行优化。以下是一些方法，可以帮助你分析和测量 Vue 组件的渲染时间：1、 使用浏览器的性能工具•打开 Chrome DevTools，进入 "Performance" 面板。•点击 "Record" 按钮，然后在应用中执行一些操作。•停止记录后，你可以看到每个帧的渲染时间。通过展开相关的堆栈，你可以找到与 Vue 组件相关的渲...
2024-12-22 08:00:55
248
转载 Performance.mark创建时间戳
Performance.mark()是一个 Web API 方法，用于在浏览器的性能时间线中创建一个时间戳。这对于测量代码执行的性能非常有用，因为它允许开发者在特定的代码执行点上标记时间，然后可以通过Performance.measure()方法来计算两个标记之间的时间差。以下是如何使用Performance.mark()方法的步骤：1、创建标记： 使用performance.mar...
2024-12-21 16:45:51
123
转载 响应式对象重复赋值问题
proxy 的一个代理，对代理对象属性的更改会反映到原对象上。例如：constobj = {name:'Alice',age:30};constproxy =newProxy(obj, {});proxy.name='Bob';console.log(obj.name);// 'Bob', 原对象也被修改了在上面的例子中，我们创建了obj对象，并将其用Proxy...
2024-12-13 19:31:41
80
转载 Vue 3 编译器
在 Vue 的源码中，compiler-core、compiler-dom、compiler-sfc 和 compiler-ssr 是 Vue 3 编译器的不同部分，它们各自承担不同的角色和功能。以下是它们之间的区别和作用：1、 compiler-core:•功能: 这是 Vue 3 编译器的核心模块，包含了大部分编译器的通用逻辑。•作用: 提供了模板编译的基础功能，包括解析（parsing）、转...
2024-12-08 16:07:28
158
转载 Vue3 的 defineExpose 用法
如果一个子组件使用的是选项式 API 或没有使用 <script setup>，被引用的组件实例和该子组件的 this 完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易，当然也因此，应该只在绝对需要时才使用组件引用。大多数情况下，你应该首先使用标准的 props 和 emit 接口来实现父子组件交互。有一个例...
2024-12-06 18:56:07
76
转载 请求都有并发数的限制
每个浏览器对同一域名的资源请求都有并发数的限制。这是为了防止服务器过载和确保良好的用户体验。不同的浏览器和版本可能会有不同的限制，但通常现代浏览器会允许每个域名同时发起 6 到 8 个请求。以下是一些常见浏览器的资源请求并发数限制的概述：1.Google Chrome: 通常允许每个域名 6 个并发请求。2.Mozilla Firefox: 通常允许每个域名 6 个并发请求。3.Microsoft...
2024-12-01 20:22:20
757
转载 vue-router 处理路由错误
等待导航结果当使用 router-link 组件时，Vue Router 会自动调用 router.push 来触发一次导航。虽然大多数链接的预期行为是将用户导航到一个新页面，但也有少数情况下用户将留在同一页面上：1、用户已经位于他们正在尝试导航到的页面2、一个导航守卫通过调用 return false 中断了这次导航3、当前的导航守卫还没有完成时，一个新的导航守卫会出现了4、一个导航守卫通过返回...
2024-11-26 10:18:25
222
转载 Workstation Pro 虚拟机对个人使用免费
VMware Workstation Pro 是行业标准桌面虚拟机软件，可以使用 VMware 桌面虚拟机管理程序针对任何平台进行开发和测试。VMware Workstation Pro - 功能强大的桌面虚拟机软件，用户可在单一的桌面上同时运行不同的操作系统，进行开发、测试、部署新的应用程序。在一台机器上同时运行两个或更多Windows、DOS、LINUX系统，在虚拟网路，实时快照，拖曳共享文件...
2024-11-24 20:40:07
269
转载 小程序中模板调用 data 里的函数
微信小程序 glass-easel 组件框架新增特性中支持在模板中调用 data 里的函数。如果 data 中的某个字段是函数，在模板里可以直接调用它：Component({ data: { getDataField() { return 'someValue' }, },})<view>{{ getDataField() }}</view...
2024-11-21 19:40:52
159
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人