- 博客(1015)
- 收藏
- 关注
RSS订阅转载 检查一个对象是否是 Proxy
在 JavaScript 中，没有内置的方法直接判断一个对象是否是 Proxy 对象。Proxy 对象是通过 new Proxy(target, handler) 创建的，它没有暴露任何直接的标识符来判断对象是否为 Proxy。Vue3 中提供 isProxy() 方法，检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。Vue 在创建响应式 Proxy 对象时，会在对象上设置一个不可枚举的特殊标记。
2025-03-31 19:54:59
2
转载 理解 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
17
转载 getCurrentInstance 原理是什么？
getCurrentInstance是 Vue 3 中的一个内部 API，主要用于在组合式 API（Composition API）中获取当前组件实例的引用。了解它的原理可以帮助你更好地理解 Vue 3 的内部工作机制。以下是关于getCurrentInstance的详细解释：工作原理1、组件实例上下文：•在 Vue 3 中，每个组件在创建时都会有一个与之关联的组件实例对象。这个对象包含了...
2025-03-09 09:03:14
29
转载 Vue3 数渲染函数API如何使用
在 Vue 3 中，渲染函数提供了一种使用 JavaScript 来构建组件模板的方式。与模板语法相比，渲染函数提供了更多的动态性和灵活性。以下是如何使用 Vue 3 渲染函数 API 的一些基本步骤和示例：基本用法在 Vue 3 中，渲染函数可以通过render选项来定义。你可以在render函数中使用h函数（也称为createElement函数）来创建虚拟 DOM 节点。示例&...
2025-03-08 19:49:59
19
转载 查看 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
143
转载 @vue/compiler-core整体逻辑
@vue/compiler-core是 Vue 3 中的一个关键模块，用于将 Vue 模板编译为渲染函数。它的整体逻辑可以分为几个主要阶段：解析（Parsing）、转换（Transformation）、优化（Optimization）和代码生成（Code Generation）。下面是对这些阶段的详细介绍：1. 解析（Parsing）目标：将模板字符串解析为抽象语法树（AST）。•输入：Vue ...
2025-02-16 10:35:22
31
转载 v-exposure 元素曝光
要在 Vue 中创建一个自定义指令，用于元素曝光上报埋点，可以使用IntersectionObserverAPI 来检测元素何时进入或离开视口。以下是一个示例，展示如何实现这个功能：Vue.directive('exposure', { inserted(el, binding) { // 创建一个 IntersectionObserver 实例 const observer =...
2025-01-20 19:06:00
37
转载 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
42
转载 createElementVNode 底层工具函数
createElementVNode是 Vue 3 中用于创建虚拟 DOM 节点（VNode）的一个底层工具函数。它是 Vue 内部用于渲染的核心函数之一，主要在编译模板时生成的渲染函数中被调用。在 Vue 3 中，createElementVNode是从vue包导出的，通常不需要手动使用它，因为 Vue 的模板语法会自动编译成调用类似createElementVNode的渲染函数。但...
2025-01-13 19:24:11
57
转载 副作用清理 onWatcherCleanup
有时我们可能会在侦听器中执行副作用，例如异步请求：watch(id,(newId) =>{fetch(`/api/${newId}`).then(() =>{ // 回调逻辑 })})但是如果在请求完成之前 id 发生了变化怎么办？当上一个请求完成时，它仍会使用已经过时的 ID 值触发回调。理想情况下，我们希望能够在 id 变为新值时取消过时的请求。我们可以使用 on...
2025-01-10 08:00:26
42
转载 前端如何管理JS内存
在前端开发中，管理 JavaScript 内存是优化性能、减少内存泄漏、提升用户体验的重要一环。以下是一些管理 JavaScript 内存的关键方法和最佳实践：1.理解 JavaScript 内存管理机制JavaScript 的内存管理主要依赖以下两个过程：•内存分配：当创建变量、对象、函数时，JavaScript 会自动分配内存。•垃圾回收：JavaScript 引擎（如 V8）会自动回收不再...
2025-01-09 19:34:32
32
转载 prefers-color-scheme CSS 特性
prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。语法1、no-preference 表示系统未得知用户在这方面的选项。在布尔值上下文中，其执行结果为 false。2、light 表示用户已告知系统他们选择使用浅色主题的界面。3、dark 表示用户已告知系统他们选择使用暗色主题的界面。示例这个例子使用了一个有黑色背景和白色文字的元素，当用...
2025-01-08 19:12:48
58
转载 onunhandledrejection 捕获 Promise
当 Promise 被 reject 且没有 reject 处理器的时候，会触发 unhandledrejection 事件；这可能发生在 window 下，但也可能发生在 Worker 中。这对于调试和为意外情况提供后备错误处理非常有用。unhandledrejection 继承自 PromiseRejectionEvent，而 PromiseRejectionEvent 又继承自 Event。...
2024-12-24 09:27:35
135
转载 什么是源代码映射？
源映射的必要性早期的 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
42
转载 分析组件的渲染时间
在 Vue 应用中分析每个组件的渲染时间可以帮助开发者找出性能瓶颈并进行优化。以下是一些方法，可以帮助你分析和测量 Vue 组件的渲染时间：1、 使用浏览器的性能工具•打开 Chrome DevTools，进入 "Performance" 面板。•点击 "Record" 按钮，然后在应用中执行一些操作。•停止记录后，你可以看到每个帧的渲染时间。通过展开相关的堆栈，你可以找到与 Vue 组件相关的渲...
2024-12-22 08:00:55
87
转载 Performance.mark创建时间戳
Performance.mark()是一个 Web API 方法，用于在浏览器的性能时间线中创建一个时间戳。这对于测量代码执行的性能非常有用，因为它允许开发者在特定的代码执行点上标记时间，然后可以通过Performance.measure()方法来计算两个标记之间的时间差。以下是如何使用Performance.mark()方法的步骤：1、创建标记： 使用performance.mar...
2024-12-21 16:45:51
49
转载 响应式对象重复赋值问题
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
36
转载 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
81
转载 Vue3 的 defineExpose 用法
如果一个子组件使用的是选项式 API 或没有使用 <script setup>，被引用的组件实例和该子组件的 this 完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易，当然也因此，应该只在绝对需要时才使用组件引用。大多数情况下，你应该首先使用标准的 props 和 emit 接口来实现父子组件交互。有一个例...
2024-12-06 18:56:07
49
转载 请求都有并发数的限制
每个浏览器对同一域名的资源请求都有并发数的限制。这是为了防止服务器过载和确保良好的用户体验。不同的浏览器和版本可能会有不同的限制，但通常现代浏览器会允许每个域名同时发起 6 到 8 个请求。以下是一些常见浏览器的资源请求并发数限制的概述：1.Google Chrome: 通常允许每个域名 6 个并发请求。2.Mozilla Firefox: 通常允许每个域名 6 个并发请求。3.Microsoft...
2024-12-01 20:22:20
476
转载 vue-router 处理路由错误
等待导航结果当使用 router-link 组件时，Vue Router 会自动调用 router.push 来触发一次导航。虽然大多数链接的预期行为是将用户导航到一个新页面，但也有少数情况下用户将留在同一页面上：1、用户已经位于他们正在尝试导航到的页面2、一个导航守卫通过调用 return false 中断了这次导航3、当前的导航守卫还没有完成时，一个新的导航守卫会出现了4、一个导航守卫通过返回...
2024-11-26 10:18:25
125
转载 Workstation Pro 虚拟机对个人使用免费
VMware Workstation Pro 是行业标准桌面虚拟机软件，可以使用 VMware 桌面虚拟机管理程序针对任何平台进行开发和测试。VMware Workstation Pro - 功能强大的桌面虚拟机软件，用户可在单一的桌面上同时运行不同的操作系统，进行开发、测试、部署新的应用程序。在一台机器上同时运行两个或更多Windows、DOS、LINUX系统，在虚拟网路，实时快照，拖曳共享文件...
2024-11-24 20:40:07
131
转载 小程序中模板调用 data 里的函数
微信小程序 glass-easel 组件框架新增特性中支持在模板中调用 data 里的函数。如果 data 中的某个字段是函数，在模板里可以直接调用它：Component({ data: { getDataField() { return 'someValue' }, },})<view>{{ getDataField() }}</view...
2024-11-21 19:40:52
72
转载 date-fns 日期处理库
date-fns和Moment.js是两个流行的 JavaScript 日期处理库，各有其特点和适用场景。以下是它们之间的一些主要区别：1、模块化 vs. 单一包:•date-fns: 采用模块化设计，每个功能都是一个独立的函数模块。这意味着你可以只引入需要的功能，从而减少打包后的文件大小。•Moment.js: 是一个单一的大包，所有功能都包含在一个库中。在项目中引入时，即使只需要部分功...
2024-11-15 19:52:32
101
转载 Vue 3.5 辅助函数useTemplateRef
Vue 3.5+ 要在组合式 API 中获取引用，我们可以使用辅助函数useTemplateRef()：<script setup>import { useTemplateRef, onMounted } from 'vue'// 第一个参数必须与模板中的 ref 值匹配const input = useTemplateRef('my-input')onMounte...
2024-11-10 11:20:14
258
转载 在 Vue 3 中 .native 修饰符已经被移除
你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符：<base-input v-on:focus.native="onFocus"></base-input>在 Vue 3 中，.native修饰符已经被移除，这是因为事件绑定的方式有所改变。在 Vue 2 中，.native修饰符用于在自定义组件上绑定原生...
2024-11-06 09:59:15
424
转载 Vue 自定义的指令
除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。下面是一个自定义指令的例子，当一个 input 元素被 Vue 插入到 DOM 中后，它会被自动聚焦：<script setup>...
2024-11-05 09:29:00
42
转载 理解 Vue3 的插槽
举例来说，这里有一个组件，可以像这样使用：<FancyButton> Click me! <!-- 插槽内容 --></FancyButton>而<FancyButton>的模板是这样的：<button class="fancy-btn"> <slot></slot> <!-- 插槽出口 --...
2024-11-04 08:00:08
42
转载 WebStorm 现在对非商业用途免费
我们很激动地宣布许可模式将有所变动，我们相信这一变动将惠及开发者社区 – WebStorm 和 Rider 现在对非商业用途免费！请继续阅读，详细了解这一变动以及我们做出改变的原因，并务必查看下面的“常见问题解答”部分，以了解更多详细信息。原文：https://blog.jetbrains.com/zh-hans/blog/2024/10/24/webstorm-rider/常见问题解答下面是对一...
2024-11-03 16:15:32
316
转载 pnpm如何管理多仓库
pnpm是一个高效的 JavaScript 包管理工具，可以用于管理单个项目的依赖，也可以用于管理多仓库（monorepo）结构的项目。以下是一些使用pnpm管理多仓库的基本步骤和最佳实践：1. 初始化多仓库首先，你需要在你的项目根目录下创建一个pnpm-workspace.yaml文件，这个文件用于定义工作区的结构。以下是一个示例：packages: - 'packages/*'...
2024-11-03 10:06:51
140
转载 禁止浏览器F12调试
在不打开发者工具的情况下，debugger是不会执行将页面卡住，而恰恰是利用debugger的这一点，如果你打开开发者工具一定会被debugger卡住，那么上下文时间间隔就会增加，在对时间间隔进行判断，就能巧妙的知道绝对开了开发者工具，随后直接跳转到空白页。<!DOCTYPE html><html> <header> <title...
2024-10-27 17:07:32
169
转载 Vue3.5 响应式 Props 解构
以前我们对Props直接进行解构赋值是会失去响应式的，需要配合使用toRefs或者toRef解构才会有响应式，那么就多了toRefs或者toRef这工序，而最新Vue3.5版本已经不需要了。了解一下 toRef() 的使用：1.可以将值、refs 或 getters 规范化为 refs (3.3+)。2.也可以基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同...
2024-10-20 16:47:57
182
转载 【枕头没选对，颈椎很遭罪】越早更换枕头，越早矫正体态，预防颈椎问题！...
现代人人都是“低头族”白天上班盯电脑一坐就是七八个小时晚上低头看手机也是好几个小时脖子承受的实在太多了有时候一觉醒来肩颈更是酸胀疼痛动几下就会咔嚓作响睡得时间长了还会出现头晕其实这些都是颈椎病在作怪依据世卫组织的报告全球60多亿人口当中约有9亿人患颈椎病颈椎病对我们最直观的影响就是会改变人体的体态驼背、高低肩、富贵包以及颈纹等等多种问题同时出现并且肩颈问题是不可逆转的偶发性头晕头痛以及各种肩颈酸痛...
2024-10-20 16:47:57
45
转载 input上传文件夹
带有 type="file" 的<input>元素允许用户可以从他们的设备中选择一个或多个文件。选择后，这些文件可以使用提交表单的方式上传到服务器上，或者通过 Javascript 代码和文件 API 对文件进行操作。当指定布尔类型属性 multiple 时，文件 input 允许用户选择多个文件。如果出现布尔属性 webkitdirectory，表示在文件选择器界面中用户只能选择...
2024-10-19 21:16:35
152
转载 比较版本号
版本号的的比较顺序应该是从大版本往小版本开始对比，每个版本之间用.隔开。因此我们可以将两个版本字符串以.分隔开，从第一个版本号开始往下对比，若遇到version1的当前版本号大于version2，则返回1,否则返回-1。若一方的小版本号为空，则看另外一方的小版本号是否不为0。根据上面的思路有两种做法，一种是用JavaScript自带的Array.split()函数，将其以.分割成数组。另一种是不使...
2024-10-18 19:46:08
41
转载 使用 CSS flexbox 制作时间线
基本DOM结构<body> <div class="timeline"> <div class="events"> <!-- The first `1989` event --> <div class="event life"> <!-- The circle is an svg ...
2024-10-17 13:01:13
37
转载 fetch获取请求进度
fetchAPI 本身不直接支持请求进度的监控，但你可以通过使用ReadableStream和Response.body来间接实现下载进度的跟踪。对于上传进度，fetch目前没有直接的方法来跟踪。以下是一个使用fetch和ReadableStream来获取下载进度的示例：function fetchWithProgress(url, onProgress) { return...
2024-10-16 19:27:36
295
转载 自定义文件压缩格式
自定义文件压缩格式可以增加文件的安全性，但并不能完全防止别人解压缩。通常如果别人直接解压文件会提示格式不支持。自定义文件压缩格式通常涉及到创建一种新的压缩算法或封装现有算法以满足特定需求。以下是一些步骤和方法，帮助你在 Node.js 中实现自定义文件压缩格式。1. 选择压缩算法首先，你需要选择一个压缩算法。常见的压缩算法包括：•ZIP: 广泛使用的压缩格式，支持多种文件。•Gzip: 主要用于单...
2024-09-22 08:00:28
137
转载 Node 压缩文件
archiver是一个用于创建 ZIP 和 TAR 文件的 Node.js 模块。它允许你将多个文件和文件夹打包成一个压缩文件，方便存储和传输。以下是archiver的基本用法介绍。安装首先，你需要安装archiver包。可以使用 npm 进行安装：npm install archiver基本用法以下是一个使用archiver创建 ZIP 文件的示例：const fs = requi...
2024-09-21 16:09:48
147
转载 如何做静态资源预加载
静态资源预加载是一种优化网页加载速度和用户体验的技术，主要通过提前加载用户可能需要的资源（如图片、脚本、样式表等），以减少后续请求的延迟。下面是一些常用的方法来实现静态资源预加载：1. 使用<link rel="preload">HTML5 提供了<link rel="preload">标签，可以在文档的<head>中声明需要预加载的资源。例如：<...
2024-09-18 19:18:08
114
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人