tongaidefeiyu-优快云博客

原创 vue router路由守卫

全局守卫：适合全应用级别的控制（如登录验证、全局日志）。路由独享守卫：适合单个路由的特殊控制（如某个页面的单独权限）。组件内守卫：适合组件内部的逻辑（如表单离开确认、参数更新处理）。根据场景选择合适的守卫类型，可以更优雅地控制路由导航流程。

2025-10-12 21:43:18 483

原创为什么 Vue2 中直接修改数组或对象的属性不会触发响应式更新？

实现响应式（直接代理整个对象 / 数组），从根本上解决了这些问题，无需手动干预即可监测所有操作。手动触发更新 —— 这两个方法会强制为新增 / 修改的属性添加响应式劫持，并触发依赖更新。Vue2 对数组的处理与对象不同：由于数组可能包含大量元素，若像对象一样对每个索引进行。Vue2 中直接修改数组或对象的属性不会触发响应式更新，核心原因是其响应式系统基于。因此，Vue2 采用了 **“重写数组变异方法”** 的策略：对数组的。）这种操作不经过重写的数组方法，Vue2 没有对数组索引的。

2025-10-12 20:24:52 339

原创 vue2与vue3响应式区别

从根本上解决了 Vue2 的局限性，不仅使用更直观（无需手动调用特殊 API），还在性能和灵活性上有显著提升，尤其适合处理复杂数据结构和大型应用。（包括嵌套对象的每个属性），在处理包含大量属性的复杂对象（如深层嵌套的大 JSON）时，初始化阶段会产生较大的性能开销（递归耗时 + 内存占用）。进行代理，通过拦截对象的读取、修改、删除等操作实现响应式。）追踪数据访问，当代理对象的属性被访问时，自动关联当前。：依赖收集与属性绑定，每个属性维护一个依赖列表（），当属性被访问时，将当前组件的。

2025-10-12 20:24:06 746

原创 vuex与pinia区别

特性VuexPinia核心概念State、Getters、Actions（无 Mutations）异步操作必须通过 Actions → Mutations直接在 Actions 中修改 StateTypeScript 支持差（需大量手动类型定义）优（零配置自动类型推断）模块化依赖 Modules，需手动管理命名空间天然模块化，每个 Store 独立状态修改限制严格模式下必须通过 Mutations无限制，支持直接修改或通过 Actions官方推荐。

2025-10-12 19:32:55 1316

原创 vuex使用详情

Vuex 通过 “单一状态树” 集中管理共享状态，核心流程是：组件通过dispatch触发 Action 处理异步，Action 通过commit调用 Mutation 同步修改 State，最终 State 变更驱动组件重新渲染。合理使用 Module 拆分状态、遵循同步 / 异步分离原则，可有效管理复杂应用的状态。

2025-10-12 18:05:30 770

原创 Hooks与minxs区别

mixins：Vue 2 中主流的逻辑复用方式，本质是选项对象的合并。多个组件共享的逻辑（datamethods、生命周期等）被定义在一个对象中，组件通过引入后，Vue 会自动将 mixin 中的选项与组件自身选项合并。Hooks（组合函数）：Vue 3 中基于 Composition API 的逻辑复用方式，本质是函数封装与逻辑组合。将复用逻辑封装在以use开头的函数中，通过返回响应式数据和方法供组件使用，组件需显式接收并使用这些返回值。mixins的核心问题是命名冲突、逻辑来源模糊、灵活性差。

2025-09-29 21:56:05 1708

原创如何根据项目需求调整这些安全相关请求头？

根据项目需求调整安全相关请求头时，需要结合业务场景、兼容性要求、功能需求等因素综合考量，核心原则是：在满足业务功能的前提下，保持尽可能高的安全性。以下是具体调整思路和场景示例：默认值：（禁止任何 iframe 嵌入）作用：防御点击劫持攻击（防止页面被嵌套在恶意网站的 iframe 中）。调整场景：⚠️ 注意：现代浏览器更推荐用的指令替代（功能更灵活），例如：（允许trusted.com嵌入）。根据项目安全等级，可补充以下头：示例：若项目需要限制只能加载同域脚本和图片，可添加：梳理业务需求：明确项目是

2025-09-28 20:55:53 727

原创 axios封装如何做网络安全处理

在封装 axios 时进行网络安全处理，需要从请求发送、数据传输、响应处理等多个环节入手，防范常见的网络安全风险（如 XSS、CSRF、数据泄露等）。

2025-09-28 20:38:37 311 1

原创 js继承的几种方式

继承方式核心思想优点缺点原型链继承子类原型指向父类实例继承原型方法引用类型共享，无法传参构造函数继承子类构造函数调用父类构造函数解决属性共享，支持传参无法继承原型方法组合继承结合前两种方式兼顾属性和方法继承父类构造函数被调用两次寄生组合式继承优化组合继承，避免重复调用完美解决上述问题实现稍复杂ES6 class 继承基于 extends 和 super 语法糖简洁直观，语义化好本质仍是原型链，需理解底层原理实际开发中，ES6 class 继承。

2025-09-27 19:03:53 314

原创原型与原型链

原型：函数的prototype属性，是实例共享属性 / 方法的载体。原型链：对象通过__proto__形成的链式查找结构，是 JS 继承的核心。所有对象最终都追溯到，其__proto__为null，标志着原型链的终点。

2025-09-27 16:41:18 518

原创图片懒加载

创建一个全局自定义指令v-lazy// Vue2 示例（main.js）// 注册全局懒加载指令// 指令绑定到元素时触发// 存储真实图片地址// 初始显示占位图（可选）},// 元素插入 DOM 时触发// 创建观察器实例// 元素进入视口// 获取真实图片地址if (src) {// 设置 src 触发加载// 加载完成后停止观察})}, {rootMargin: '100px 0px' // 提前 100px 加载})// 开始观察目标元素})

2025-09-22 19:17:20 391

原创路由懒加载

在路由配置文件（通常是）中，使用动态import()替代静态import导入组件：javascript运行// 静态导入（不推荐，会一次性加载所有组件）// 懒加载路由组件：动态 import() 返回 Promise// 路由配置path: '/',component: Home // 使用懒加载组件},component: About // 使用懒加载组件// 创建路由实例routes})默认情况下，构建工具会为懒加载组件生成随机的代码块名称（如chunk-1.js通过。

2025-09-17 21:47:28 434

原创 component 标签

是 Vue 实现组件动态化的核心工具，通过is属性灵活切换组件，适用于需要根据状态动态展示不同内容的场景（如标签页、步骤表单、权限动态渲染等）。结合可优化性能，保留组件状态；配合 Props 和事件传递，能实现完整的组件交互逻辑。

2025-09-17 20:24:19 1008

原创缓存组件（keep-alive）使用详情

是优化组件切换性能的关键工具，核心价值在于保留组件状态、减少重复渲染。实际使用时需结合includeexclude精准控制缓存范围，通过activated处理缓存前后的逻辑，并注意避免无差别缓存导致的内存问题。

2025-09-16 23:27:03 274

原创 Vue 性能优化可以从多个维度展开，涵盖代码编写、组件设计、打包构建等层面，以下是常见的优化方法：

减少不必要的响应式追踪、降低渲染频率、减小资源体积、优化交互体验。实际开发中需结合具体场景（如首屏加载慢、交互卡顿等），通过工具定位瓶颈后针对性优化。

2025-09-16 22:57:20 1751

tongaidefeiyu的博客