vue
关注
分享
扫一扫
文章平均质量分 81
代码里的小猫咪
一只忙忙碌碌的小蜜蜂
展开
-
Vue 组件行为失控？inheritAttrs 可能是罪魁祸首！
一句话概括：inheritAttrs 是 Vue 组件中的一个配置项，用于控制非 prop 的 attribute 是否自动绑定到组件根元素上，默认启用，设置为 false 后需手动通过 $attrs 显式绑定到指定元素。原创 2025-05-12 16:53:32 · 969 阅读 · 0 评论 -
从 v-model 到 defineModel：Vue3 正在悄悄改变开发习惯
表面上是小小语法更新，背后是 props、emit、双向绑定、编译优化的完美结合。掌握它，才能真正写出未来式的 Vue3 组件。原创 2025-04-30 08:30:00 · 846 阅读 · 0 评论 -
加了防抖就能防住重复提交？测试：我不答应！
在实际开发中提交按钮未防止重复点击时，可能导致的多次网络请求问题，通过封装点击锁 useClickLock 与 v-bLoading 指令的方式，有效实现按钮防抖与加载反馈，提升用户体验与系统稳定性。原创 2025-04-23 08:30:00 · 719 阅读 · 0 评论 -
不可低估 Vue 指令的威力
指令是 Vue 提供给开发者的 DOM 操作扩展点，底层通过编译 + 虚拟 DOM patch 生命周期钩子与真实 DOM 绑定，实现对 DOM 元素的控制。原创 2025-04-11 08:45:00 · 690 阅读 · 0 评论 -
keep-alive：我不死，只是沉睡；onActivated：我醒了！
keep-alive 是 Vue 提供的强大缓存机制，能够智能缓存组件实例，避免不必要的销毁和重建，显著提升性能，特别适用于复杂的路由切换和高频繁组件更新场景。原创 2025-04-10 09:30:00 · 2282 阅读 · 0 评论 -
Vue 项目中大量报红提示：JSX 元素类不支持特性，因为它不具有“props”属性。
报红提示：xxx 不能用作 JSX 组件 或者 JSX 元素类不支持特性，因为它不具有“props”属性。原创 2025-04-03 10:00:00 · 447 阅读 · 0 评论 -
Vue 3 自定义权限指令 v-action
在 Vue 3 项目中，权限控制是常见需求。使用 v-action 自定义指令，可以自动控制元素的显示与隐藏，让权限管理更简洁高效。原创 2025-04-02 10:56:00 · 362 阅读 · 0 评论 -
单向数据流：Vue 响应式魔法 vs React 不可变信仰
Vue 的单向数据流通过响应式系统 + 事件机制实现高效更新，降低心智负担；React 则通过不可变数据 + 函数式组件强调控制权。原创 2025-03-17 08:30:00 · 628 阅读 · 0 评论 -
分页点击太快数据混乱？精准获取最后加载内容
原因： 网络请求是异步的，快速点击时，后发的请求可能比先发的请求更早返回，导致页面数据错乱。原创 2025-02-26 09:00:00 · 2108 阅读 · 0 评论 -
Vue 3 模板中的 ref 和 Vue 3 响应式 ref 的区别
Vue 3 为什么不在 JavaScript 代码中自动解包 ref 但可以在模板中解包呢？原创 2025-02-23 08:45:00 · 953 阅读 · 0 评论 -
基于指定数据结构，动态适配表格样式
基于同一个数据结构设计不同样式的表格，并根据需要选择样式，同时保持代码的简洁。原创 2025-02-20 09:00:00 · 372 阅读 · 0 评论 -
为什么 Vue 3 不再支持 IE 浏览器？
一文讲述 Vue 3 不支持 IE 浏览器的原因，以及，proxy 不支持降级操作的原因，感兴趣的话，可以瞧瞧。原创 2025-02-19 09:00:00 · 715 阅读 · 0 评论 -
Vue 组件不听话？那就强制刷新！
在 Vue 开发过程中，通常 Vue 的响应式系统会自动处理数据变化并触发视图更新。但在某些特殊情况下，数据虽然改变，但并不会触发视图更新，这时就需要手动强制组件重新渲染。原创 2025-02-14 09:00:00 · 1944 阅读 · 0 评论 -
Vant Tabs 内外部内容渲染的差异
简单介绍：在 Vant Tabs 组件中，当 Tab 内容放到 Tabs 内部和 Tabs 外部时的区别。也就是，内部直接渲染 与 外部通过条件判断来展示内容的区别。原创 2025-02-08 09:15:00 · 1114 阅读 · 0 评论 -
Vuex 解析：从 Vue 2 到 Vue 3 的演变与最佳实践
对于新的 Vue 3 项目，建议使用 Pinia，尤其是在需要高度类型推导和简洁 API 的场景中。对于现有的 Vue 2 项目，Vuex 仍然是推荐的选择原创 2025-02-06 14:10:13 · 961 阅读 · 0 评论 -
一文搞懂异步更新 nextTick 的魔法
nextTick 是一个延迟执行回调函数的机制。它将回调函数推迟到当前执行栈清空后，且当前事件循环的下一个微任务队列中。原创 2025-01-23 11:02:36 · 748 阅读 · 0 评论 -
Vue 3 的 keep-alive 及生命周期钩子
简单介绍一下：keep-alive 内置组件和钩子函数 onActivated、onDeactivated原创 2025-01-22 17:11:20 · 1643 阅读 · 0 评论 -
理解 package-lock.json 何时推送与忽略
简单介绍一下 package-lock.json 和 package.json 文件，以及 - lock 文件何时应该推送远程。原创 2025-01-20 11:34:07 · 1299 阅读 · 0 评论 -
Vue 3 自定义 Hook：实现页面数据刷新与滚动位置还原
实现：在列表页滚动查看某一条卡片时，从卡片进入详情页面后，返回时页面能够滚动回原来的卡片位置，而不是顶部或其他位置。原创 2025-01-19 15:54:22 · 582 阅读 · 0 评论 -
在 Vue 3 集成 e签宝电子合同签署功能
举例实现Vue 3 + e签宝电子合同签署功能，需要使用 e签宝提供的实际 SDK 或 API。原创 2025-01-06 15:42:08 · 1002 阅读 · 0 评论 -
如何用细节提升用户体验？
前端给用户反馈是提升用户体验的重要部分，根据场景选择不同的方式可以有效地提升产品的易用性和用户满意度。原创 2024-12-16 14:02:45 · 711 阅读 · 0 评论 -
为什么 Vue 使用虚拟 DOM？
Vue 使用虚拟 DOM 的初衷不仅是为了性能优化，更重要的是为了解决开发效率和灵活性的问题，同时保持视图更新的可控性和一致性。原创 2024-12-14 09:45:00 · 1792 阅读 · 0 评论 -
解析 Vue 类型扩展
import type { Plugin } from 'vue'; export type SFCWithInstall = T & Plugin; 代码解释原创 2024-12-11 14:20:43 · 1042 阅读 · 0 评论 -
Object.freeze 减少响应式开销，提高加载性能
冻结对象是一种提升代码安全性和性能的有力工具，尤其适用于需要不可变数据的场景。注意：使用时的局限性，以及性能优化只有在特定条件下才能实现的特点。原创 2024-12-06 13:35:40 · 1009 阅读 · 0 评论 -
解决快速切换页面导致的内容错乱问题
快速切换页面导致内容闪烁问题的解决方法，唯一标识法和请求取消法。原创 2024-12-06 10:00:00 · 933 阅读 · 0 评论 -
父元素的 overflow:hidden 只对某个子元素有效
在父元素内部仅控制一部分内容溢出隐藏的方法，提供了静态直接改变 HTML 结构和动态灵活改变 两个方法。原创 2024-12-05 14:35:03 · 1232 阅读 · 0 评论 -
实现固定表格首尾列不随着滚动条滚动
使用 CSS 实现，固定表格的首尾列，不随着滚动条的滑动而滑动。原创 2024-11-27 14:35:50 · 1307 阅读 · 0 评论 -
从覆盖到拼接：优化 onInput 事件的输入
将 onInput 事件每次都是搜索输入的内容，转换为，指定时间后搜索输入的全部内容。原创 2024-11-27 10:15:00 · 825 阅读 · 0 评论 -
Table 滚动条始终停靠在可视区域的底部
普通的表格滚动条肯定都使用过，那自定义、随页面大小变化、展示到 table 可视区域底部的滚动条呢？原创 2024-11-26 11:18:25 · 1089 阅读 · 0 评论 -
为什么滚动条会“偏心”呢？
简单分享一个关于 ElScrollbar 组件有趣的现象原创 2024-11-25 13:38:33 · 229 阅读 · 0 评论 -
解密网页「极速显形术」
本文简单介绍了预渲染和骨架屏的使用方法、原理等内容，概括为：静态部分用预渲染，动态部分用骨架屏。原创 2024-11-25 10:31:55 · 963 阅读 · 0 评论 -
轻松掌握文本换行
本文介绍了一些在项目中实现换行的方法，以及 white-space: pre-line 不生效的误区。原创 2024-11-22 15:30:58 · 11648 阅读 · 0 评论 -
在 Vue 中，一般都是获取响应式对象，那反过来呢？
本文介绍 toRaw 的基本使用和注意事项等，其是 Vue 3 提供的一个 API，主要用于从 Vue 的响应式对象中获取其对应的原始非响应式对象。原创 2024-11-20 10:19:27 · 596 阅读 · 0 评论 -
分析 Vue 3 页面数据加载延迟问题
在 Vue 3 的项目中，当我们使用响应式数据来管理页面状态时，可能会遇到由于接口数据加载延迟，导致页面初始渲染时数据尚未获取完成的问题，对此进行分析和解决。原创 2024-11-19 14:45:11 · 1614 阅读 · 0 评论 -
警惕：Element Plus Select 类型匹配的大坑！
在使用 Element Plus 的 ElSelect 时，v-model 的值与 ElOption.value 类型不匹配可能会引发默认值失效、选中项消失等问题，具体分析见文章内容哦。原创 2024-11-19 11:17:19 · 2218 阅读 · 0 评论 -
冷启动 VS 热启动
本文介绍了冷启动和热启动，二者的主要区别在于初始资源加载的状态：冷启动是从零开始，热启动是从保存的状态中恢复，还举例阐述具体做法。原创 2024-11-16 15:27:35 · 3535 阅读 · 0 评论 -
为什么 Vue3 封装 Table 组件丢失 expose 方法呢？
本文讲述了二次封装 Table 组件中，暴露 expose 的方法但不起作用的原因和解决方法，可以让我们更加灵活的使用组件。原创 2024-11-15 17:56:41 · 1378 阅读 · 0 评论 -
解决 ElSelect 数据量大导致加载速度慢
在使用 Element Plus 的 组件时，数据量过大会导致加载缓慢、卡顿，影响用户体验。本文简单分析了原因，并提供了一些方案：虚拟滚动、分页加载、减少响应式追踪以及事件防抖。原创 2024-11-12 17:04:56 · 2522 阅读 · 0 评论 -
精细掌控 Vant 中 Toast 提示
在 Vant UI 中，Toast.clear()方法会清除页面上所有正在显示的 Toast 实例。这种设计是因为 Vant UI 的 Toast 通常是以全局单例模式存在的，意味着页面中所有的 Toast 提示实际上共享一个实例。原创 2024-11-11 14:23:20 · 3195 阅读 · 0 评论 -
Vue 项目中为何选择 TSX 而非传统 .vue 文件
Vue 项目中使用 TSX（TypeScript JSX）的写法逐渐增多，尤其在 TypeScript 项目中。在此简单介绍一下。原创 2024-11-07 14:43:38 · 4348 阅读 · 0 评论