ErgouTree's Blog

侦听器 什么是侦听器 它之所以叫侦听器，是因为它可以侦听一个或多个响应式数据源数据，并再数据源变化时调用所给的回调函数，就是你传给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] + ... +...

Vue3 指令 什么是指令 Vue 指令（Directives）是 Vue.js 的一项核心功能，它们可以在 HTML 模板中以 v- 开头的特殊属性形式使用，用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。 Vue 指令是带有前缀 v- 的特殊 HTML 属性，它赋予 HTML 标签额外的功能。 指令本质上是对 DOM 操作的封装，让你可以通过声明式的方式控制 DOM。 指令的基本语法 1<element v-directive:argument.modifier="expression"></element> 指令名称：v-directive（如 v-if、v-for） 参数：argument（可选，如 v-bind:href 中的 href）参数在指令后以冒号指明。 修饰符：modifier（可选，如 v-on:click.stop 中的 stop）修饰符是以半角句号 ....

学Vue前的基础语法 插值表达式 插值表达式（Template Literal Interpolation）是 ES6 (ECMAScript 2015) 引入的特性，它允许你在字符串中直接嵌入变量、表达式或函数调用结果。 插值表达式有很多插值方法 传统的方法就是字符串拼接，使用 + 运算符将变量或表达式与字符串连接起来。 123const name = "Alice";const greeting = "Hello, " + name + "!";console.log(greeting); // 输出: Hello, Alice! 它兼容性极佳，适用于所有 JavaScript 环境，而且性能相对较好 模板字符串是 JavaScript ES6 引入的一种新特性，使用反引号（`）包裹字符串，并在 ${}中放置要插入的内容。 1234567891011// 基本变量插值const name = "张三";const age = 25;//...

...

了解前端框架 实际上，我在学习了很长一段时间的后端之后才接触到前端框架，所以说，这是一个比较尴尬的事情 后端的框架我们都比较熟悉，主要内容其实无非就是用于处理处理业务逻辑和数据持久化 后端框架是面向服务设计的，它更关注数据的正确性和安全性，倾向于实际业务的逻辑和数据 而且后端框架一般都会有很多的关于多线程并发处理的内容，因为这会提升性能 而 Vue 这种前端框架，它是处理用户交互和数据展示的，主要是用户与业务的交互 Vue 是面向组件设计的，这是前端框架设计模式的一种，而且它着重关注用户体验和界面流畅性 一般情况下，Vue 是单线程，异步处理的，因为 JavaScript 语言本身就是单线程的。这主要源于浏览器的设计 你想想，操作...

问题 单调队列是一种很典型的问题，它能用来高效地解决 “滑动窗口最大值” 问题的数据结构 给定一个长度为 n 的数组 nums 和一个大小为 k 的滑动窗口，窗口从数组左端向右滑动，每次滑动一格，求每个窗口内的最大（小）值。 那么这种问题大概率其实下意识会想到用堆 如果是求最大值，但是如果使用大根堆，每次插入 O (logk)，但删除窗口左侧元素，也就是删除不在窗口内的堆顶的时候，需要 O (n)，整体 O (nlogk)，仍不够高效。 P1886 滑动窗口 /【模板】单调队列 - 洛谷 P1886 滑动窗口 /【模板】单调队列 题目描述 有一个长为 n 的序列 a，以及一个大小为 k 的窗口。现在这个窗口从左边开始向右滑动，每次滑动一个单位，求出每次滑动后窗口中的最小值和最大值。 例如，对于序列 [1, 3, −1, −3, 5, 3, 6, 7] 以及 k = 3，有如下过程： $$\def\arraystretch{1.2} \begin{array}{|c|c|c|}\hline \textsf{窗口位置} &...

问题 Levenshtein Distance，一般称为编辑距离（Edit Distance，Levenshtein Distance只是编辑距离的其中一种）或者莱文斯坦距离，算法概念是俄罗斯科学家弗拉基米尔·莱文斯坦（Levenshtein · Vladimir I）在1965年提出。此算法的概念很简单：Levenshtein Distance指两个字串之间，由一个转换成另一个所需的最少编辑操作次数，允许的编辑操作包括： 将其中一个字符替换成另一个字符（Substitutions）。、 插入一个字符（Insertions）。 删除一个字符（Deletions）。 image-20251117195049889 问题分析 看上去就像是动态规划 那么考虑子问题，从 a[1...i] 到 b[1.....j]的编辑距离 那么我们就可以考虑这样一个状态变量 设 dp[i][j] 表示将字符串 a 的前 i 个字符（a[0..i-1]）转换为字符串 b 的前...