Vue3 part9—侦听器,模板引用,混入和响应式工具
侦听器
什么是侦听器
它之所以叫侦听器,是因为它可以侦听一个或多个响应式数据源数据,并再数据源变化时调用所给的回调函数,就是你传给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...
Vue3 part8—Vue组件生命周期
Vue的生命周期阶段
Vue
组件的生命周期指的是一个组件从创建、挂载、更新到销毁的整个过程。
Vue
在这个过程中的不同阶段会自动调用特定的函数,这些函数被称为生命周期钩子(Lifecycle
Hooks),你可以在这些钩子中编写代码来执行特定操作。
Vue
组件的生命周期主要分为四个大阶段,每个阶段包含若干具体的钩子函数
避免使用箭头函数:定义生命周期钩子时,不要使用箭头函数,因为这会导致无法通过
this 获取组件实例。
image-20251130133508264
创建阶段 (Creation)
这个阶段发生在组件实例被创建之后、挂载到 DOM 之前。
beforeCreate:
实例刚被创建,数据观测和事件配置之前被调用。此时无法访问
data、methods 等。
created:
实例已创建完成,数据观测、属性和方法的运算、事件回调已配置。可以访问
data 和 methods,但 DOM
还未生成,$el 属性尚不存在。
挂载阶段 (Mounting)
这个阶段发生在组件被挂载到 DOM...
Vue3_part7—Vite构建工具与开发服务器
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:版本 ≥...
Vue3 part6—使用组件及其各种实际问题
使用组件
组件的创建
当使用构建步骤时,我们一般会将 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() { ...
Vue3 part5—组件注册和script setup
组件注册
一个 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' //...
Vue3 part4—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_part3—Vue指令和声明式渲染
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)修饰符是以半角句号
....
Vue3 part2—Vue基础知识与组合式API
学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;//...
隙间画谈—清河门火车站
...
Vue3 part1—了解前端框架Vue及其构建工具Vite
了解前端框架
实际上,我在学习了很长一段时间的后端之后才接触到前端框架,所以说,这是一个比较尴尬的事情
后端的框架我们都比较熟悉,主要内容其实无非就是用于处理处理业务逻辑和数据持久化
后端框架是面向服务设计的,它更关注数据的正确性和安全性,倾向于实际业务的逻辑和数据
而且后端框架一般都会有很多的关于多线程并发处理的内容,因为这会提升性能
而 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{窗口位置} &...
动态规划—线性dp之编辑距离
问题
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 的前...

















