- 博客(193)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 第五阶段：Vue3核心深度深挖(第80天)（ Vue2迁移Vue3）
Vue 2 到 Vue 3 的迁移是一项系统工程。提供了宝贵的过渡支持，但核心在于理解两个版本间的差异，并有计划地、逐步地更新代码。重点关注响应式原理、全局 API、模板语法、生命周期、事件处理和第三方库兼容性。充分的测试是迁移成功的关键保障。请务必详细阅读官方迁移指南。
2026-02-11 08:45:00
818
原创 第五阶段：Vue3核心深度深挖(第79天)（Vue3自定义指令进阶）
在 Vue3 中，自定义指令通过一组生命周期钩子函数定义指令的行为。mounted指令首次绑定到元素时触发。在元素插入 DOM 前调用，mounted在元素插入 DOM 后调用。参数el：指令绑定的元素binding：包含指令信息的对象（值、参数、修饰符等）vnode：当前虚拟节点prevVnode：上一个虚拟节点（仅在updated中可用）updated当绑定元素的父组件更新前/后触发（即使指令的值未变）。参数：同mounted。unmounted。
2026-02-11 08:00:00
435
原创 第五阶段：Vue3核心深度深挖(第78天)（ Vue3错误边界）
使用创建错误边界组件 ()，封装可能出错的子组件，提供局部降级 UI 和错误隔离。配置处理所有未被组件边界捕获的 Vue 相关错误，用于集中上报。使用window事件监听器 (error) 捕获非 Vue 相关的运行时错误和异步错误。无论是组件边界还是全局处理器，捕获到的错误都应上报到监控平台 (如 Sentry, Bugsnag, Rollbar)，便于分析和修复。在错误边界组件中，向用户展示清晰、友好的错误信息，并可能提供恢复操作（如重试按钮）。
2026-02-10 08:45:00
241
1
原创 第五阶段：Vue3核心深度深挖(第77天)（Vue3组件挂载流程）
函数的差异比对能力，使得 Vue 能够高效地更新 DOM。首次挂载是创建整个树，后续的更新则是通过比较新旧 VNode 树并最小化 DOM 操作来实现。好的，我们来详细说明 Vue 3 中组件挂载的核心流程，从创建 VNode 到最终渲染成真实 DOM 的步骤。这个过程主要发生在 Vue 的渲染器内部。这个过程充分利用了 VNode 的抽象和。
2026-02-10 08:00:00
582
原创 第五阶段：Vue3核心深度深挖(第76天)（Vue3虚拟DOM）
Vue 3 的虚拟 DOM 通过精细化 VNode 结构与高效diff策略（尤其是双端对比 + LIS）显著提升了渲染性能。其中patchFlag和key的设计是优化核心，使框架在保证声明式开发体验的同时，逼近原生 JavaScript 的操作效率。
2026-02-09 08:45:00
533
原创 第五阶段：Vue3核心深度深挖(第75天)（Vue3侦听器进阶）
函数内使用到的响应式依赖。当这些依赖变化时，副作用函数会重新运行。来实现的，数组中可以包含多个需要监听的响应式引用（如。）中创建的，则需要手动清理，否则可能造成内存泄漏。，可以更高效地管理 Vue3 的响应式逻辑！函数不仅可以监听单个响应式数据源，还可以。所有与该组件关联的侦听器。的自动依赖收集与停止监听机制。这是通过将第一个参数设置为一个。传入的副作用函数，并在执行过程中。，调用该函数可以手动停止侦听器。是一个更「智能」的侦听器。的回调函数可以接收一个。时，Vue 会在组件卸载时。
2026-02-09 08:15:00
336
原创 第五阶段：Vue3核心深度深挖(第74天)（Vue3计算属性进阶）
好的，我们来详细探讨一下 Vue 3 中计算属性computed的进阶用法，特别是多依赖监听以及如何创建只读或可写的计算属性。
2026-02-08 09:45:00
732
原创 第五阶段：Vue3核心深度深挖(第72天)（Vue3 Suspense深度用）
Vue 3 的Suspense组件是处理异步 UI 的强大工具。实现精细化的异步加载控制（延迟、超时、重试）。Suspense作为局部错误边界，结合实现全局监控。#fallback使用骨架屏等策略提供流畅的用户体验，避免加载过程中的界面空白或布局抖动。掌握这些深度应用技巧，能够显著提升 Vue 3 应用中处理异步操作的健壮性和用户体验。
2026-02-07 08:45:00
1274
原创 第五阶段：Vue3核心深度深挖(第71天)（Vue3 Teleport原理）
Vue3 的Teleport组件允许将模板中的子节点渲染到 DOM 中的其他位置，其底层逻辑基于虚拟 DOM 的灵活挂载机制。Vue 编译器在解析<teleport>标签时，会记录其to属性指定的目标容器（如body#app等），并将子节点标记为“需转移内容”。若目标容器发生变化（如动态切换to的值），Vue 会销毁原位置的 DOM 并重新挂载到新容器，同时保持组件状态。
2026-02-07 08:15:00
636
原创 第五阶段：Vue3核心深度深挖(第70天)（Vue3模板语法进阶）
v-memo大型静态列表：通过依赖选中状态等，精准控制哪些项需要更新。避免子组件无谓更新：当父组件变化但子组件的关键 props 未变时。优化 VNode 创建成本高的区域：仅在必要依赖变化时重新构建。使用时务必准确指定依赖数组，并理解其基于引用相等的比较机制。将其视为一种针对特定性能瓶颈的“手术刀”式优化，而非常规手段。在正确的场景下应用v-memo可以显著提升大型或复杂 Vue 应用的渲染性能。
2026-02-06 08:45:00
951
原创 第五阶段：Vue3核心深度深挖(第69天)（Vue3依赖注入）
响应式保证：始终提供ref或reactive对象。键名唯一性：使用 Symbol 或命名空间避免冲突。类型安全：结合 TypeScript 明确数据类型。模块化：按功能拆分注入作用域，避免全局污染。默认值：为inject设置合理的默认值或工厂函数。通过以上规范，可在大型项目中高效、安全地使用实现组件通信。
2026-02-06 08:15:00
323
原创 第五阶段：Vue3核心深度深挖(第68天)（Vue3生命周期）
这些钩子的执行顺序基于Vue的内部生命周期事件。以下我将逐步解释其使用方法和源码级执行顺序。注册的回调函数会根据组件的生命周期事件按特定顺序触发。函数与生命周期钩子的使用和执行顺序。内部调用，且注册顺序不影响执行顺序；回调会在对应生命周期事件发生时触发。函数，它用于定义组件的响应式状态、方法和生命周期钩子。在源码中，Vue使用内部事件系统来触发这些钩子。函数在组件初始化时执行，允许你使用导入的函数（如。Vue 3的生命周期执行顺序由内部钩子控制。函数中，你可以通过Vue提供的函数（如。
2026-02-05 08:45:00
735
原创 第五阶段：Vue3核心深度深挖(第67天)（Composable实战封装）
好的，我们来探讨如何封装一个通用的请求 Hook（useRequest）并实现状态复用方案。
2026-02-05 08:15:00
636
原创 第五阶段：Vue3核心深度深挖(第66天)（Composition API进阶）
好的，我们来封装一个通用的防抖/节流逻辑的Composable函数，便于在Vue 3的Composition API中复用。
2026-02-04 08:45:00
425
原创 第五阶段：Vue3核心深度深挖(第65天)（Composition API核心）
执行时机早：在组件实例创建前、钩子前运行。无this：在setup中访问this会得到undefined。访问props：通过第一个参数访问，是响应式的。访问attrsslotsemit：通过第二个参数context的属性访问。attrs和slots是非响应式的对象（但slots的内容可能随时间变化）。emit是一个用于触发事件的函数。理解setup的执行时机和如何通过其参数访问上下文，是正确使用 Composition API 的基础。
2026-02-04 08:15:00
562
原创 第五阶段：Vue3核心深度深挖(第64天)（Vue3只读响应式）
readonly和是 Vue 3 提供的强大工具，用于在保持响应性的前提下，对数据进行只读保护。它们对于维护单向数据流、封装状态、保护重要配置以及构建更健壮、可维护的应用程序架构至关重要。在选择时，根据对数据保护深度的需求来决定使用哪一个。
2026-02-03 08:45:00
784
原创 第五阶段：Vue3核心深度深挖(第63天)（Vue3响应式进阶）
refreactive(深层响应式):当你需要追踪对象内部任意层级属性的变化时。这是最常见的情况。自动、方便，无需手动处理嵌套。对大型或深层嵌套对象有性能开销，可能导致不必要的更新。shallowRef(浅层 ref):当你只关心整个值的替换，不关心其内部结构的变化时。适用于大型对象、外部状态集成、性能优化（避免深度转换）。修改.value的内部属性不会触发更新。(浅层 reactive):当你只关心对象顶层属性的变化，其嵌套属性的变化要么无关紧要，要么你打算单独管理其响应式时。
2026-02-03 08:15:00
622
原创 第五阶段：Vue3核心深度深挖(第62天)（Vue3响应式细分）
特性refreactive主要用途基本类型、对象/数组 (通过.value)对象/数组访问方式.value(必须)直接属性访问 (不需要.value模板自动解包是 (在模板中无需.value是 (直接访问属性)包装基本类型可以不可以(需用ref引用稳定性稳定 (引用地址不变)不稳定(返回新代理对象)深层响应性如果.value是对象，则深层默认深层解构/传递保持响应性 (因引用稳定)解构属性或传递后失去响应性TS 类型Ref<T>T(代理类型)
2026-02-02 08:45:00
684
原创 第五阶段：Vue3核心深度深挖(第61天)（Vue3响应式原理底层）
特性Vue 2 (Vue 3 (Proxy监听范围仅限已存在的属性完整对象操作（增/删/改/查）数组监听需重写方法原生支持初始化性能递归遍历消耗大惰性监听，按需触发动态属性需Vue.setVue.delete直接响应Map/Set等新类型不支持原生支持。
2026-02-02 08:30:00
285
原创 第四阶段：Vue 进阶与生态整合（第 60 天）(Vue 全栈实战：开发一个完整的博客系统（前端 + 后端接口对接）)
用户模块：登录、注册、权限控制（未登录拦截）。文章模块：发布、编辑、删除、列表展示（分页 + 筛选）、详情查看（富文本渲染）。评论模块：评论列表渲染、发布评论。前端架构基于 Vue3 + Element Plus + Vue Router + Pinia，后端接口使用 Axios 封装对接。项目优化包括懒加载、打包体积优化等。综合运用 Vue 知识点。
2026-02-01 15:30:00
741
原创 第四阶段：Vue 进阶与生态整合（第 59 天）(Vue3 新特性详解：Composition API、Teleport、Suspense 等)
Vue3 是 Vue.js 框架的最新版本，引入了多项改进和新特性，旨在提升开发效率和用户体验。：替代部分 Options API 场景，允许按业务逻辑组织代码，提高代码复用性和可维护性。Teleport：用于将组件渲染到 DOM 树的指定位置（如弹窗渲染到 body 标签下），解决样式嵌套问题。Suspense：提供异步组件加载时的占位功能，支持显示加载状态，优化用户体验。其他新特性：响应式原理升级（基于 Proxy，解决了 Vue2 的局限性），全局 API 重构（如createApp。
2026-02-01 15:15:00
490
原创 第四阶段：Vue 进阶与生态整合（第 58 天）(Vue 项目部署：打包、上线与服务器配置)
部署流程：从本地打包（）、分析体积、上传文件到服务器、配置 Nginx。常见问题解决刷新 404 问题：在 Nginx 中使用try_files重写路由到index.html。生产环境跨域：通过 Nginx 反向代理 API 请求，避免浏览器跨域限制。最佳实践：始终测试配置、使用 HTTPS 增强安全、监控日志（如遵循这些步骤，你的 Vue 应用就能高效上线运行。如有疑问，可以进一步讨论具体场景！
2026-01-31 13:33:16
667
原创 第四阶段：Vue 进阶与生态整合（第 57 天）(Vue 测试入门：单元测试与端到端测试的实现)
测试的意义：在 Vue 项目中，测试能有效保障代码质量、减少回归 bug，提升应用稳定性。入门用法单元测试：使用 Jest + Vue Test Utils 挂载组件并断言验证，适合测试独立模块。端到端测试：使用 Cypress 录制和运行流程测试，适合验证整体应用行为。后续基础：掌握这些入门知识后，您可以进一步学习自动化测试集成（如 CI/CD 流水线）、覆盖率报告等，构建更健壮的测试体系。通过本指南，您已初步掌握 Vue 测试的核心实现，为后续深入学习打下坚实基础。
2026-01-31 13:32:58
341
原创 第四阶段：Vue 进阶与生态整合（第 56 天）(Vue UI 框架整合：Element Plus 的快速上手与使用)
引入策略开发期：全局引入快速迭代生产环境：必须按需引入组件使用原则表单验证：结合库实现表格渲染：大数据量使用虚拟滚动v-if控制生命周期性能优化： $$ \text{打包体积} = \sum_{i=1}^{n} \text{组件体积} \times \text{使用频度} $$删除未使用组件动态加载复杂组件Element Plus 官方文档。
2026-01-30 08:45:00
360
原创 第四阶段：Vue 进阶与生态整合（第 55 天）(Vue TypeScript 整合：提升代码的类型安全性)
id: number;props: {// 基础类型count: {},// 复杂对象});类型即文档interface明确定义数据结构，降低理解成本编译时防护：通过PropType约束复杂类型，避免传递错误数据结构组合式 API 增强和显式声明响应式类型维护成本优化：类型变更时 IDE 自动定位所有引用点，重构更安全最佳实践：对超过 3 个字段的对象必定义接口，公共组件必须声明精确的PropType。
2026-01-30 08:30:00
668
原创 第四阶段：Vue 进阶与生态整合（第 54 天）(Vue 性能优化：虚拟列表处理大量数据渲染)
核心原理：虚拟列表通过动态计算可视范围，减少 DOM 数量，解决渲染性能问题。关键是参数计算和滚动偏移处理。优化方案：在数据量大的场景（如表格、长列表），优先使用虚拟列表避免直接渲染。工具使用插件简化实现，支持动态高度，快速集成到 Vue 项目。实践建议：测试不同数据量下的性能差异，确保列表项高度准确（固定或动态计算），以优化滚动体验。通过理解虚拟列表的原理和掌握插件用法，你能高效处理大量数据渲染，显著提升 Vue 应用性能。如有更多问题，欢迎进一步讨论！
2026-01-29 08:45:00
611
原创 第四阶段：Vue 进阶与生态整合（第 53 天）(Vue 性能优化：组件懒加载与代码分割)
掌握组件懒加载的实现方式，包括路由组件和普通组件的动态导入。理解代码分割的原理：Webpack 将动态导入的模块打包为独立 chunk 文件，实现按需加载。学会验证优化效果：通过打包后查看dist目录，确认 chunk 文件生成。认识到这对首屏性能的优化作用：减小初始文件体积，提升用户访问体验（如首屏加载速度可提升 50% 以上）。在实际项目中，结合这些技术能显著提升性能。建议在开发中逐步应用，并通过工具（如 Lighthouse）测试加载时间变化。
2026-01-29 08:30:00
667
原创 第四阶段：Vue 进阶与生态整合（第 52 天）(Vue 服务端渲染（SSR）：提升首屏性能与 SEO 的方案)
$ \text{首屏时间} = \text{HTML 传输时间} + \text{浏览器解析时间} $$
2026-01-28 08:45:00
51
原创 第四阶段：Vue 进阶与生态整合（第 51 天）(Vue 过渡与动画库：使用 Animate.css 简化动画开发)
掌握整合技巧：通过 Vue 的组件和 Animate.css 的类名，能快速实现复杂动画，无需手动编写 CSS，提升开发效率。熟记常用动画类名：根据业务需求选择合适的动画效果，如用于弹窗弹出，用于元素消失。提升用户体验：自定义动画时长（如duration属性）确保动画流畅，增强交互效果。通过以上步骤，开发者可以高效利用 Animate.css 在 Vue 项目中创建引人注目的动画效果，节省时间并专注核心业务逻辑。
2026-01-28 08:30:00
306
原创 第四阶段：Vue 进阶与生态整合（第 50 天）(Vue 动画与过渡：实现元素进入 / 离开的平滑效果)
基础实现单个元素过渡用，列表过渡用。列表必须指定唯一key值。过渡类名：熟记生命周期（v-enter等），通过 CSS 自定义效果（如transition属性）。适用场景：适合单个元素或组件的显示/隐藏。：适合动态列表（如添加、删除、排序）。过渡模式：使用等优化过渡顺序。自定义效果：结合 CSS 动画（如@keyframes）可实现更复杂效果，但核心原理相同。通过以上案例，您应该能掌握 Vue 过渡的基本实现方式。练习时，多尝试不同 CSS 属性（如transform或height。
2026-01-27 08:45:00
496
原创 第四阶段：Vue 进阶与生态整合（第 49 天）(Vue 跨域问题解决方案：Proxy 代理、CORS 与 JSONP)
开发阶段：优先使用 Proxy 代理快速解决生产环境：必须通过 CORS 配置实现跨域兼容需求：仅对 GET 请求且需支持老旧浏览器时使用 JSONP安全注意CORS 需明确指定允许的域名（避免使用JSONP 存在 XSS 风险，需验证数据来源核心公式：跨域解决方案选择 = 环境需求 × 请求类型 × 安全约束即：$$ \text{Solution} = f(\text{Env}, \text{Method}, \text{Security}) $$
2026-01-27 08:30:00
43
原创 第四阶段：Vue 进阶与生态整合（第 48 天）(Vue 与 Axios 整合：实现 HTTP 请求的封装与拦截)
减少冗余代码：通过封装 axios 实例和拦截器，避免在每个请求中重复配置。便于统一维护：拦截器处理 token 携带、错误捕获等常见需求，确保一致性。快速响应需求：熟记拦截器的使用场景，如添加认证头或处理 API 错误，能加速开发。通过以上步骤，你可以轻松实现 HTTP 请求的封装与拦截，构建更健壮的 Vue 应用。如果有具体问题，欢迎进一步讨论！
2026-01-26 20:35:47
927
原创 第四阶段：Vue 进阶与生态整合（第 47 天）(Vue 项目目录结构解析：每个文件夹的作用与规范)
职责边界明确components：纯 UI 展示views：路由关联页面api：接口逻辑隔离utils：纯函数工具可维护性提升命名一致性强功能模块高内聚避免多层嵌套目录通过规范化的目录结构和编码约定，可显著降低团队协作成本，增强代码可读性和可扩展性。
2026-01-26 20:35:16
181
原创 第三阶段：Vue 路由与状态管理（第 45 天）(路由与状态管理实战：开发一个带登录权限的单页应用)
Vue Router 与 Vuex 联动：路由守卫（beforeEach）结合 Vuex 状态（如）实现权限控制。例如，访问私有路由时，检查状态：如果用户未登录（即 $ \text{isAuthenticated} = \text{false} $），则拦截跳转。权限控制核心逻辑：基于“状态存储 + 路由拦截”的模式。状态存储在 Vuex，路由守卫动态判断权限，确保安全访问。实战解决方案状态持久化：使用插件如，防止页面刷新后登录状态丢失。路由跳转优化：在登录页通过query。
2026-01-25 16:30:00
1157
原创 第四阶段：Vue 进阶与生态整合（第 46天）(Vue CLI 详解：项目脚手架的配置与自定义)
Vue CLI 的核心使用方式：能灵活选择命令行（vue create）或图形化界面（vue ui）创建项目，适应不同开发场景。vue.config.js 的常用配置项：熟记关键配置，如（端口修改）、（路径别名）、（打包优化）。通过这些实现脚手架的个性化定制，满足项目需求（如优化开发效率或打包输出）。最佳实践：在真实项目中，先通过图形化界面快速搭建基础，再手动配置进行高级定制。确保测试配置变更，避免影响构建流程。如果您有具体问题或需深入某个点，请提供更多细节，我将进一步解答！
2026-01-25 13:00:00
508
原创 第三阶段：Vue 路由与状态管理（第 44天）(Vuex 持久化：解决页面刷新后状态丢失的问题)
要点说明状态丢失原因VuexState存储在内存中，页面刷新导致内存重置。核心解决方案将状态保存到浏览器持久化存储 ()，初始化时恢复。手动方案在Mutation中同步存储，在应用入口恢复。灵活但需手动维护。插件方案使用自动处理存储和恢复。推荐使用，方便安全。安全注意避免将敏感数据存入。使用cookie或在插件中过滤。通过上述方案，尤其是利用插件，可以有效解决 Vuex 状态在页面刷新后丢失的问题，提升用户体验。
2026-01-24 12:30:00
1131
原创 第三阶段：Vue 路由与状态管理（第43天）(Vuex Module：拆分复杂状态，实现模块化管理)
以下是关于 Vuex Module 的详细解析，结合你的核心知识点进行结构化说明：在大型项目中，单一 Store 会导致：通过模块拆分可实现：✅ 状态分层管理✅ 功能高内聚、低耦合✅ 团队协作更清晰在模块的 中：模块拆分原则命名空间最佳实践代码组织 性能优化通过模块化设计，Vuex 可支撑万人级项目的状态管理，同时保持代码的可维护性和团队协作效率。
2026-01-24 11:15:00
74
原创 第三阶段：Vue 路由与状态管理（第 42天）(Vuex Action：处理异步操作与复杂业务逻辑)
Action 的核心作用：处理异步操作（API请求、定时器等）和封装复杂的业务逻辑。定义与触发在 Store 的actions对象中定义函数。在组件中使用或mapActions辅助函数映射后的方法来触发。与 Mutation 的关系Action不直接修改 State。Action 通过调用提交 Mutation来间接修改 State。遵循“Mutation 负责同步修改 State，Action 负责处理异步/复杂逻辑并提交 Mutation”的原则。异步处理。
2026-01-23 08:45:00
587
原创 第三阶段：Vue 路由与状态管理（第41天）(Vuex Mutation：修改全局状态的唯一方式)
唯一修改途径：所有状态修改必须通过 Mutation。同步原则：Mutation 必须是同步函数，异步操作需使用 Action。简化开发：优先使用提升代码可读性。载荷规范：多个参数时使用对象传递，例如：});
2026-01-23 08:30:00
50
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人