ErgouTree's Blog

Axios 是什么 简介 Axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 环境中使用。简化了前端发送 HTTP 请求的流程，提供了拦截器、自动解析 JSON 等强大功能。 它就是一个专门用来发送 HTTP 请求的工具库，相比浏览器原生的 XMLHttpRequest 或者 Fetch API，它有更简洁的语法、更强大的功能（比如拦截器、请求取消、自动转换 JSON 数据等），因此成为了前后端分离项目中对接后端接口的首选工具。 它的核心特点： 支持 Promise API，便于异步操作的处理（async/await 语法）。 拦截请求和响应（比如请求前添加 token、响应后统一处理错误）。 自动转换请求和响应数据（比如自动将 JSON 字符串转为 JavaScript 对象）。 取消请求。 客户端支持防御 XSRF（跨站请求伪造）。 在前后端分离架构中，前端（如 Vue/React/Angular）通过 Axios...

状态管理 什么是状态管理 在前端开发中，状态（State） 指的是应用中可变化的数据，比如用户信息、购物车列表、页面切换的标签页、表单输入值、全局主题配置等。 状态管理 则是对这些状态进行统一的创建、读取、修改、监听和共享 的一套规则和工具，核心目标是解决状态分散、流转混乱、难以维护的问题。 Vue 项目中，组件间共享数据的原生方式有哪些？ 父子组件：props 向下传、emit 向上触发事件； 跨层级 / 兄弟组件：依赖 EventBus 或父组件中转； 全局数据：挂载到 Vue.prototype 或 window 上。 这些在项目规模扩大后会暴露致命问题 数据在多个组件间层层传递（“prop”），溯源和调试困难状态流转混乱： 状态修改不可控：任何组件都能随意修改全局数据，出现...

嵌套路由 嵌套路由如何诞生 一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如： image-20251206130056766 父路由组件中通过 <router-view> 承载子路由组件，路由路径按层级嵌套，最终实现 URL 与页面结构的一一对应。 在单页应用（SPA）中，很多页面并非 “一次性渲染”，而是由父容器 + 子内容组成 电商后台：/dashboard（父）→ /dashboard/order（子：订单页）、/dashboard/user（子：用户页）； 社交应用：/user/123（父：用户主页）→ /user/123/profile（子：个人资料）、/user/123/posts（子：用户动态）。 使用嵌套路由 在 routes 数组中，父路由通过...

问题描述 多重背包问题是经典的动态规划问题之一，是 01 背包和完全背包的泛化： 给定 n 种物品和一个容量为 m 的背包。第 i 种物品的重量为 wei[i]，价值为 val[i]，并且数量有限，最多只能取 s[i] 件。 目标是在不超过背包容量的前提下，选择物品装入背包，使得总价值最大。 与 01 背包的区别：01 背包中每种物品只有 1 件（s[i] = 1）。 与完全背包的区别：完全背包中每种物品有无限件（s[i] = ∞）。 image-20251130195244607 问题分析 在学习了前两种背包的基础上，多重背包的问题还是很清晰的 可以看出，多重背包是介于 01 背包和完全背包之间的一种更通用的模型： 当 s[i] = 1 时，退化为 01 背包 当 s[i] 足够大（大于 m/wei[i]）时，退化为完全背包 那么，01 背包的状态转移 是这样的 12// 01背包：对于第i件物品，选或不选dp[i][j] = max(dp[i-1][j], dp[i-1][j-wei[i]] +...

SPA架构 什么是 SPA 架构 我们知道 SPA 是单页面的前端架构，但是，单页面应用（SPA）不是简单的只有一个HTML文件的形式，而是一种应用架构模式： SPA = Single Page Application（单页应用） 整个应用只加载一次 HTML 文件，后续所有页面切换、数据交互都在这一个页面内完成，不重新加载整个页面。 SPA 就像一个「容器」，首次加载时把所有必需的 JS、CSS 都加载完成（或按需加载），之后用户操作时，只动态更新页面内的「部分内容」，URL 变化但浏览器不刷新。 SPA 架构做的前端有这样的核心特征 应用仅包含 1 个核心 HTML（比如 index.html），所有页面都是这个 HTML 内的「组件片段」； 无刷新切换，页面切换靠 JS 动态渲染组件（销毁旧组件、挂载新组件），浏览器地址栏 URL 可变化，但不会触发页面刷新（区别于传统网站的「跳转 = 刷新」）； 数据驱动视图，页面内容更新依赖「数据变化」（比如 Vue 的响应式），而非重新加载 DOM；交互时只通过...

问题 给定 n 种物品和一个容量为 C 的背包。第 i 种物品的重量是 w[i]，价值是 v[i]。 每种物品可以无限次使用（即可以选 0 个、1 个、2 个… 直到背包容量限制）。 问：将哪些物品装入背包，可使这些物品的总重量不超过背包容量，且总价值最大？ image-20251125192750189 问题分析 该问题与 0-1 背包非常像，但是确实是两者问题 0-1 背包：每种物品只能选0 个或 1 个 完全背包：每种物品可以选任意多个 所以，我们依旧可以这样定义状态变量 定义 f[i][j] 表示：考虑前 i 种物品，在背包容量为 j 时的最大价值。 那么接下来就要确定递推关系，那么对当前背包容量 j，依旧考虑的是第i件物品能否放入？或者说是否放入？ 所以对于第 i 种物品，我们可以参考 0-1 背包的思路，有多种选择： 选 0 个：dp[i][j] = dp[i-1][j] 也就是当前背包容量 j < w[i]，这个物品放不下 或者能放入，但是不合适，所以不放入 选 1...

侦听器 什么是侦听器 它之所以叫侦听器，是因为它可以侦听一个或多个响应式数据源数据，并再数据源变化时调用所给的回调函数，就是你传给watch侦听器一个响应式变量，然后当这个变量变化时，自动触发一个你定义的函数，就像一个人被监控了一样，只要这个人一动，摄像头就会报警 这段话来自[Vue3 - watch 侦听器（保姆级详细使用教程）][https://blog.csdn.net/weixin_44166849/article/details/133339827]来讲一下是什么意思 侦听一个或多个响应式数据源 响应式数据源：就是 Vue3 中用ref、reactive声明的变量 / 对象（比如const sum = ref(1)、const obj = reactive({name: 'test'})），这类数据的特点是 “变化能被 Vue...

Vue的生命周期阶段 Vue 组件的生命周期指的是一个组件从创建、挂载、更新到销毁的整个过程。 Vue 在这个过程中的不同阶段会自动调用特定的函数，这些函数被称为生命周期钩子（Lifecycle Hooks），你可以在这些钩子中编写代码来执行特定操作。 Vue 组件的生命周期主要分为四个大阶段，每个阶段包含若干具体的钩子函数 避免使用箭头函数：定义生命周期钩子时，不要使用箭头函数，因为这会导致无法通过 this 获取组件实例。 image-20251130133508264 创建阶段 (Creation) 这个阶段发生在组件实例被创建之后、挂载到 DOM 之前。 beforeCreate: 实例刚被创建，数据观测和事件配置之前被调用。此时无法访问 data、methods 等。 created: 实例已创建完成，数据观测、属性和方法的运算、事件回调已配置。可以访问 data 和 methods，但 DOM 还未生成，$el 属性尚不存在。 挂载阶段 (Mounting) 这个阶段发生在组件被挂载到 DOM...

Vue3项目搭建 vue create 搭建新项目 我们在前面了解了 Vue 项目的构建方式有很多种，但是创建一个 Vue 项目我们通常使用 别忘了 1npm install -g @vue/cli 注意：安装 vue-cli 对 node.js 的版本是有要求的 然后 vue create 项目名称即可 image-20251122132036471 这里会让你选择 vue 的版本，默认是3 image-20251122132629104 然后你可以 npm install，然后 npm run dev 启动了就 但是要明确的是，这种通过 @vue/cli（Vue CLI）构建项目的方式不是使用 Vite。 Vue CLI 是 Vue 官方早期推出的项目脚手架工具，基于 Webpack 构建；而 Vite 是后来推出的新一代构建工具，采用了更高效的原生 ES 模块加载方式，现在也被 Vue 官方推荐用于新项目构建。 使用vite构建vue3项目 确保你的开发环境满足以下要求： Node.js：版本 ≥...

使用组件 组件的创建 当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC) 单文件组件的基本结构如下 123456789101112131415161718192021222324252627282930<template> <div class="hello"> <h1>{{ msg }}</h1> </div></template><script>export default { name: 'HelloWorld', props: { msg: String }, data() { return { count: 0 } }, methods: { increment() { ...

组件注册 一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。 vue 中组件的引用原则：先注册后使用。 image-20251128190935009 全局注册 被全局注册的组件，可以在整个应用的任何组件模板中直接使用，无需再次导入。 通用组件（如按钮、卡片、导航栏等），在多个地方频繁使用等组件一般会使用全局注册的形式，全局注册会增加初始加载体积，所以只在有必要的情况下才使用全局注册 注册方式需要在 Vue 应用实例创建时通过 app.component() 方法注册，示例代码： 1234567891011// main.ts 或 main.jsimport { createApp } from 'vue'import App from './App.vue'import WordCard from './components/WordCard.vue' //...

理解所谓的 组件 这个组件，我们可能会第一时间的想到是前端中的那些，小的那种交互式的组件，是那种 Web Components 但是，Vue 中它不止这样，我们可以把 Vue 中的组件理解为 Java 中的类 在Java中，你不会把所有代码都写在main方法里。你会创建User类、Order类、Product类。每个类都有自己的属性（字段）、行为（方法）和生命周期。 而在前端，写一个巨大的HTML文件是扫码的，要人命的。所以 Vue 建议你把页面拆分成一个个组件（比如NavBar、UserProfile、Footer）。 一个Vue组件（通常是一个.vue文件）把HTML结构（模板）、JavaScript逻辑（数据与行为）、CSS样式（外观）封装在一起。就像Java类把字段和方法封装在一起一样。 所以，Vue 中，组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。组件化开发是 Vue 的核心思想，它允许你将大型应用拆分成小的、独立的、可复用的部分，就像搭积木一样构建应用。 Vue 组件是可复用的...

问题 以最大连续和为例子说明 找出所有长度不超过 k 的连续子数组的最大和 给你一个长度为 n 的整数序列 {A1,A2,⋯,An}，要求从中找出一段连续的长度不超过 m 的子序列，使得这个序列的和最大。 输入格式 第一行为两个整数 n,m ； 第二行为 n 个用空格分开的整数序列，每个数的绝对值都小于 1000。 输出格式 仅一个整数，表示连续长度不超过 m 的最大子序列和。 输入输出样例 输入 #1 126 41 -3 5 1 -2 3 输出 #1 17 这道题是洛谷的 [U162981 最大连续和][https://www.luogu.com.cn/problem/U162981] 问题分析 上次我们说了滑动窗口的最大值最小值问题 那么这个问题就是它的进阶 接触过最大和和最小和的大伙肯定都能有一个直觉，就是能不能使用前缀和 很明显这道题是可以使用前缀和的 所以我们可以结合前缀和和单调队列来解决 计算前缀和数组 preSum，其中 preSum[i] = nums[0] + nums[1] + ... +...