- 博客(11)
- 收藏
- 关注
原创 【前端避坑】Vue3/uni-app 分页加载:到底用 push 还是 [...] 展开语法?一篇彻底搞懂内存地址与响应式!
在做 Vue3 或者 uni-app 项目时,“上拉加载更多(分页触底)”是我们最常写的功能之一。要把新请求回来的第二页数据,拼接到第一页数据的后面。解构赋值法:用 [...] 展开旧数组和新数组,拼成一个全新的数组。push 追加法:直接在原数组上 push 新数据。必须用 [...] 这种不可变数据的方式来赋值,否则页面可能不更新!但真的是这样吗?今天我们通过一个真实的案例,花 3 分钟彻底搞懂这两种写法的本质区别、内存引用的奥秘,以及 Vue3 强大的底层响应式原理。
2026-04-20 17:08:03
328
原创 组合式 API useRouter 与 路由实例导入的场景差异分析
特性import router (直接导入)可用环境仅限 .vue 组件内任何 .js / .vue 文件底层原理依赖 Vue 的 inject 注入依赖 JS 模块的单例引用推荐程度组件内强烈推荐仅在组件外使用局限性必须在 setup 顶层调用某些极端情况下可能产生循环依赖。
2026-02-14 15:54:33
350
原创 Pinia 插件配置中的实例一致性问题
在 app.use() 中直接调用 createPinia() 会导致实例引用的不一致,是插件失效的根本原因。当传入 createPinia() 时,Vue 应用程序实际上挂载的是一个没有任何插件配置的“纯净”实例(实例 B)。:pinia.use() 方法是实例方法,其注册的插件仅对当前实例(即上述代码中的实例 A)生效。插件信息被存储在该实例内部的 _p 属性中。:组件使用的 Pinia 实例(实例 B)未经过 pinia.use() 处理,因此无法识别 persist: true 等持久化配置项。
2026-02-14 14:57:45
68
原创 Vue 3 模板引用体系:单一引用与 $refs 集合的底层解构对比
在 Vue 3 组件通信中,访问子组件实例存在两种并行体系。:通过 const c1 = ref() 显式声明并绑定的引用,访问路径为 c1.value。:通过模板内置对象‘refsCollection):通过模板内置对象‘
2026-02-08 19:28:37
589
原创 Vue 3 动态属性添加与响应式丢失问题研究
慎用 toRefs 展开:...toRefs(obj) 是一把双刃剑。它虽然简化了模板代码,但也切断了对象动态扩展的响应式链路。契约意识:Vue 3 的响应式基于 Proxy,虽然比 Vue 2 的 defineProperty 强大,但它依然遵循 JavaScript 的基本运行逻辑。架构建议对于结构固定的 UI 状态,采用方案 A(显式初始化)。对于结构高度动态或来自后端的原始数据,采用方案 B(返回全对象)。对于大型逻辑块,采用方案 C(逻辑组合子 Hook)。底层原理决定开发高度。
2026-02-04 17:18:22
506
1
原创 架构思想的演进:解析 Vue 响应式原理与数据代理的本质区别
Vue 3 的 Proxy 方案不仅解决了 Vue 2 遗留的功能缺陷(无法监听增删、数组索引),更通过懒代理机制解决了大规模数据的初始化性能问题。这种从“侵入式修改属性”到“外挂式拦截操作”的转变,标志着前端响应式系统从离散式管理向系统级代理的重大架构跃迁。作为开发者,深刻理解这一变化,能让我们在构建复杂状态管理时,更加游刃有余。
2026-02-02 23:48:03
568
原创 深度解析 3 个隐藏钩子与 1 个异步利器
成员类型触发前提核心用途activated生命周期钩子被 <keep-alive> 包裹缓存组件回访时刷新、恢复状态生命周期钩子被 <keep-alive> 包裹缓存组件离开时暂停视频、清理定时器生命周期钩子子孙组件报错捕获子组件错误,防止整页白屏nextTick异步工具手动调用获取数据更新后的最新 DOM 状态基础:先用好 8 个常用钩子处理基本的创建与销毁。优化:引入 <keep-alive> 后,学会用 activated 替代 mounted。稳健。
2026-02-01 00:29:10
465
原创 Vue 2 传参终极攻略:从组件 Props 到路由解耦的深度实践
对象形式:传死数据。布尔形式:params 的简写方案,不支持 query。函数形式全能王,能合并传输 params、query 和静态值。解构建议简单的 query 提取建议使用解构。双层或多层解构(如 { query: { id } })虽然酷炫,但要注意是否影响了团队代码的阅读体验。写出别人能轻易读懂的代码,比写出别人看不懂的高级代码更牛。
2026-01-31 19:56:20
617
原创 深度解析 Vue.use() 的执行时机
在开发 Vue 2 项目时,大家肯定都写过 Vue.use(VueRouter) 或 Vue.use(Vuex)。但你有没有注意过,这个“插件安装”的语句,有人写在 main.js 里,有人写在 router/index.js 里。即便在 main.js 中先 import router 后执行 Vue.use,程序居然也能正常运行。难道 new VueRouter() 不需要插件先安装吗?为什么 Vuex 却严格要求顺序?今天我们就由浅入深,拆解这背后的 ES6 模块机制与 Vue 插件底层逻辑。
2026-01-30 20:00:47
573
原创 C++模板初阶泛型
用通用的模板去处理不同类型相同事情的函数如何实现一个通用的交换函数呢?比如我们传参数进行两个函数的相加,我们平常是而如果我们使用泛型就只需要知道了泛型函数是干啥用的,我们去学习泛型函数基本概念以及里面面到底做了什么。
2025-10-08 17:31:42
331
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅