Vue
关注
分享
扫一扫
文章平均质量分 69
Vue
星空下的DeppBing
行动清单（6 个月）
基础强化：TypeScript 进阶、深入 React/Vue 源码、掌握浏览器渲染原理与性能调优工具。
方向选择：锁定 1 个核心方向（如跨端→Flutter+Wasm；AI→TensorFlow.js+LangChain）。
全栈扩展：学习 Node.js+MongoDB，搭建 BFF 层，实践微前端 / CI/CD。
AI 融合：用 Copilot X 辅助开发，落地 1 个 AI 小应用（如智能搜索 / 工单回复）。
项目验证：做 1 个完整项目（如 3D 可视化大屏 / 跨端电商小程序），沉淀技术博客与开源代码。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
中级前端进阶方向 框架篇第二十六步) 状态管理（Vuex/Pinia、Redux/Recoil/Zustand）
前端状态管理方案对比与选型指南 本文系统梳理了主流前端状态管理方案，分析了Vue和React生态下的核心工具。Vue方面对比了Vuex和Pinia，React方面详解了Redux、Recoil和Zustand，从复杂度、约束性、TS支持等维度进行横向对比。建议Vue3新项目首选Pinia，React项目根据规模选择Zustand（轻量）或Redux Toolkit（复杂），强调"没有最佳方案，只有最适合方案"的选型理念，并提供了具体场景下的技术选型建议。原创 2025-09-26 08:00:00 · 1101 阅读 · 0 评论 -
中级前端进阶方向 框架篇第二十一步) Diff算法，可视化演示
Diff算法是前端框架中用于高效比较虚拟DOM差异的核心技术。它通过同级比较和key值优化，识别节点增删改等变化，生成最小变更集来更新真实DOM。文章详细解析了Diff算法的核心原理：1）同级比较避免跨层级追踪；2）key值优化精确识别节点变化；3）类型差异处理直接替换不同类型节点；4）批量更新减少重绘。还对比了React和Vue3的Diff策略差异，提供了可视化演示和代码实现，帮助理解其O(nlogn)复杂度的工作机制。文章强调正确使用稳定key值的重要性，并总结了常见陷阱和最佳实践。原创 2025-09-21 08:00:00 · 1220 阅读 · 0 评论 -
中级前端进阶方向 框架篇第十九步) Vue3 响应式原理（Proxy vs Object.defineProperty），可视化演示界面
本文对比了Vue2和Vue3响应式系统的实现原理。Vue2基于Object.defineProperty，存在无法检测属性添加/删除、数组操作受限等缺点。Vue3采用Proxy方案，能拦截更多操作，支持属性增删、数组索引修改等，性能更优且不需要特殊API。通过代码示例和可视化演示，展示了Proxy在响应式能力上的全面优势，包括惰性代理、ES6数据结构支持等特性。文章总结了Vue3响应式系统的改进，表明其解决了Vue2的多个痛点，构建了更强大的响应式机制。原创 2025-09-19 08:00:00 · 939 阅读 · 0 评论 -
整理一些 Vue3 前端面试题总结，涵盖一些 常见、少见、偏僻 的问题，附带解析与案例
Vue3核心知识点总结：响应式系统改用Proxy实现，支持动态属性监听。ref处理基本类型（需.value访问），reactive处理对象类型。生命周期改用setup组合式API，computed有缓存特性，watch适合异步操作。父子组件通信支持多v-model语法糖。新增shallowRef/shallowReactive优化性能，customRef可自定义逻辑。特殊组件Teleport实现DOM挂载转移，Suspense处理异步加载。性能优化方面通过v-memo、Diff算法改进（采用LIS）提升效率原创 2025-09-13 14:49:01 · 1737 阅读 · 0 评论 -
Vue 2 与 Vue 3 中 v-model 的对比以及源码分析 案例实践
分析Vue2和Vue3中v-model的实现差异。Vue2通过value属性和input事件实现双向绑定，一个组件只能绑定单个v-model；Vue3改用modelValue属性和update:modelValue事件，支持多个v-model绑定，并增强了自定义修饰符功能。源码层面，Vue2采用编译时转换，Vue3通过指令实现，提供更好的灵活性和扩展性。总体而言，Vue3的v-model是对Vue2的重大升级，使API更一致、功能更强大。原创 2025-09-05 08:15:00 · 1121 阅读 · 0 评论 -
vue3中api有SSR与没有SSR区别你知道多少？vue3底层又做了哪些区别？一文了解掌握区别 SSR 与非 SSR (CSR) 的整体区别
Vue3 SSR与CSR核心差异与选型指南 核心对比 SSR：服务端生成完整HTML，SEO友好、首屏快，但服务器压力大，需处理生命周期钩子限制（如onMounted不执行）和浏览器API兼容问题。 CSR：客户端渲染，部署简单（静态文件+API），适合交互型应用，但首屏依赖JS执行，SEO较差。 Vue3 SSR优化 专用API（如createSSRApp）、服务端生命周期钩子（onServerPrefetch）、混合 hydration 机制。 模块化设计支持Tree-shaking，减少服务端冗余代码原创 2025-09-04 08:15:00 · 1304 阅读 · 0 评论 -
分别使用javascript ， vue3 ， React 实现前端轮播图（Carousel）功能
本文介绍了三种技术实现轮播图组件的方案：1)纯JavaScript实现，单文件可直接运行，支持自动播放、暂停、键盘导航和手势滑动；2)Vue3组件方案，使用组合式API，以props接收配置项，具有响应式特性；3)React函数组件方案，基于Hooks管理状态和副作用，提供完整生命周期控制。三种实现均包含核心功能：自动轮播、指示器、导航按钮，并注重无障碍访问。CSS采用translateX实现平滑过渡，支持响应式布局，可作为现代化轮播组件的开发参考。原创 2025-09-02 08:30:00 · 255 阅读 · 0 评论 -
一些项目需要使用npm install --legacy-peer-deps 安装依赖，使用pnpm install好像可以达到同样的效果
npm与pnpm处理peerDependencies的主要差异在于：npm v7+会强制安装peerDependencies并在冲突时报错，需加--legacy-peer-deps参数绕过；而pnpm默认仅警告不强制安装，能自动解决版本冲突。这是由于pnpm采用更严格的依赖管理机制，通过硬链接和store机制确保多版本共存，因此peerDependencies问题较少需要手动干预。建议复杂项目优先选用pnpm以获得更稳定的依赖管理体验。原创 2025-08-23 07:45:00 · 2146 阅读 · 0 评论 -
[无需VIP]呕心总结Vue3 中的 ref 与 reactive：源码原理、使用场景与最佳实践全解析 从源码、设计理念、使用场景、性能对比、常见误区、最佳实践等多个维度，全面解析这两个 API
《Vue3响应式核心：ref与reactive全面解析》摘要：Vue3通过ref和reactive构建响应式系统，ref用于基础数据类型（自动包装.value），reactive处理复杂对象（Proxy深度代理）。关键区别在于：ref适合单值，需.value访问；reactive适合结构化数据，直接属性访问。源码分析显示ref通过getter/setter实现依赖追踪，reactive利用Proxy递归代理。使用时需注意：解构需toRefs保持响应性，模板自动解包ref，避免整体替换reactive对象。最原创 2025-08-22 11:59:19 · 826 阅读 · 0 评论 -
Vue3 + JS 实现的 获取当前时间并每秒自增 的小 demo
本文展示了一个Vue3组件，用于实时显示当前时间。代码通过ref()创建响应式时间变量，使用formatDate()函数格式化日期为"YYYY-MM-DD HH:MM:SS"格式。在onMounted钩子中初始化时间并设置每秒更新的定时器，onUnmounted清除定时器。组件包含简单样式，显示带边框的时间框。该组件实现了自动更新的时间显示功能，适合需要实时时间展示的场景。原创 2025-08-21 08:30:00 · 183 阅读 · 0 评论 -
vue 子孙组件传参数，通知更新
Vue组件跨层级通信方案对比： Props+$emit：简单直观但层级深时繁琐，适合小型项目； provide/inject：支持跨层通信但数据流向不清晰，适合中型项目； EventBus：解耦彻底但难维护，适合临时通信需求； Pinia/Vuex：统一状态管理但学习成本高，适合大型复杂项目。开发者应根据项目规模和复杂度选择合适方案。原创 2025-08-19 08:50:58 · 411 阅读 · 0 评论 -
最简单贴切的 解耦合 理解！附前后端不同的分析个人——理解与开发场景剖析
文章摘要： 解耦合（Decoupling）是减少软件模块间直接依赖的设计原则，通过抽象层（接口、事件、协议等）实现模块独立协作。其核心价值在于提升系统灵活性（可维护、可扩展、易测试）。前端通过组件props/状态管理、模块化拆分实现解耦；后端采用分层架构（如DDD）、依赖注入（IoC）和服务间异步通信（消息队列）。典型场景包括前后端分离（API交互）、业务逻辑与视图隔离（MVVM）。解耦合的本质是让模块"高内聚、低耦合"，最终构建适应变化的弹性系统。原创 2025-08-07 08:00:00 · 1095 阅读 · 0 评论 -
React 虚拟 DOM Diff 算法详解,Vue、Snabbdom 与 React 算法对比
React虚拟DOM Diff算法通过同层比较和键值匹配实现高效更新，核心思路包括：1）仅比较同一层级节点，跨层变化直接替换子树；2）类型不同则重建整个节点树；3）借助key匹配新旧节点，避免不必要的DOM操作。算法采用O(n)复杂度策略：先比较节点类型和key，相同则更新属性并递归diff子节点列表，否则重建子树。相比Vue的双端比较和编译优化，React更依赖开发者合理使用key来优化性能。该算法通过最小化DOM操作和最大程度复用节点，显著提升了渲染效率。原创 2025-08-02 09:30:00 · 768 阅读 · 0 评论 -
请求接口时报错 Maximum call stack size exceeded
请求接口时报错Maximum call stack size exceeded原创 2025-01-02 11:43:47 · 290 阅读 · 0 评论 -
设置前端水印不可被调试更改dom样式，删除dom元素都将调用；MutationObserver
设置前端水印不可被调试更改dom样式，删除dom元素都将调用；MutationObserver原创 2024-12-30 15:23:21 · 333 阅读 · 0 评论 -
vue项目 动态路由刷新界面白屏undefined问题
vue项目 动态路由刷新界面白屏undefined问题这里我设置了一个 routersArr key值进行路由的缓存；例如路由配置的时候直接使用原始的路由配置；这样刷新以后就可以了；当然我们是有追求的向往进步的 这样也只是饮鸩止渴。这里也是调试了好久终于是解决了；总共尝试了多种解决方案；：if判断读缓存添加路由也不可放在 new VueRouter()后面，否则也会加载白屏。这是一个笨方法，但是出奇的好用；确保首页是静态路由后，请求接口后即可将请求回的路由信息进行缓存。原创 2024-12-22 09:54:17 · 1157 阅读 · 0 评论 -
记录vue项目嵌套 企业微信 调试方案
记录vue项目嵌套 企业微信 本地调试开发原创 2024-12-11 10:22:21 · 200 阅读 · 0 评论