当前位置：首页 > news >正文

【面试 · 一】vue大集合

news 来源：原创 2025/8/15 23:05:03

基础属性

组件通信

全局状态管理 vueX

路由

路由守卫

基础属性

组件通信

全局状态管理 Pinia

路由

路由守卫

vue2、vue3生命周期

setup

vue2

基础属性

data：用于定义组件的初始数据，必须是一个函数，返回一个对象，每个组件实例都会有自己的数据对象，避免组件之间数据相互影响。

props：用于接收父组件传递的数据，必须是一个数组或对象，数组中的每个元素是一个字符串，表示接收的属性名，对象中的每个属性表示接收的属性名和属性值的类型。

methods：用于定义组件的方法，每个方法都是一个函数，可以在组件中通过 this 访问。

watch：用于监听数据的变化，当数据发生变化时，执行相应的回调函数，可以监听单个数据或多个数据的变化。

computed：用于计算属性，根据已有的数据计算出新的数据，可以监听多个数据的变化，只有当依赖的数据发生变化时才会重新计算。

created：在实例创建完成后立即执行，可以在这个钩子函数中进行数据初始化、事件监听等操作。

computed计算属性

watch

基本使用

 watch: {name: { //这里是要监听的变量名handler(newValue, oldValue) { //这里的第一个参数是改变后的值，第二个参数是原来的值console.log('改后的值是：' + newValue)console.log('原来的值是：' + oldValue)}}}

简写

    watch: {name(newValue, oldValue) { //这里的第一个参数是改变后的值，第二个参数是原来的值console.log('改后的值是：' + newValue)console.log('原来的值是：' + oldValue)}}

immediate：就是当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数，需要用到immediate属性；

deep：当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听，数组字符串一般不需要。

  watch: {name: {handler(newValue, oldValue) {//这里的第一个参数是改变后的值，第二个参数是原来的值console.log('改后的值是：' + newValue)console.log('原来的值是：' + oldValue)},immediate: true,deep:true}}

组件通信

父传子

子传父

非父子通信 eventBus事件总线（兄弟组件）

src/utils/eventBus.js

import Vue from 'vue';
export const EventBus = new Vue();

<template><button @click="sendData">发送数据到组件 B</button>
</template><script>
import { EventBus } from '@/utils/eventBus';export default {methods: {sendData() {EventBus.$emit('dataEvent', '来自组件 A 的数据');}}
};
</script>

<template><p>收到的数据：{{ receivedData }}</p>
</template><script>
import { EventBus } from '@/utils/eventBus';export default {data() {return { receivedData: '' };},created() {EventBus.$on('dataEvent', data => {this.receivedData = data;});},beforeDestroy() {EventBus.$off('dataEvent');}
};
</script>

组件通信——非父子通信 Provide Inject（跨层级组件）

<template><ChildComponent />
</template><script>
export default {provide() {return {sharedMessage: 'Hello from Provide!'};}
};
</script>

<template><p>收到的数据：{{ sharedMessage }}</p>
</template><script>
export default {inject: ['sharedMessage']
};
</script>

组件通信——非父子通信 $attrs $listeners

官方文档介绍：包含了父作用域不作为prop被识别（且获取）的attribute绑定（class和style除外）。当一个组件没有生命任何prop时，这里会包含所有父作用域的绑定（class和style除外），并且可以通过v-bind="$attrs"传入内部组件–在创建高级别的组件时非常有用。

通俗地来说就是如果从父组件传过来的值，没有在子组件中被接收，那么这些值就会被存在$attrs对象中。

//Father.vue
<template><div class="father"><span>父亲</span><Son :message="message" :age="18"></Son></div>
</template><script>
import Son from "../components/Son.vue";
export default {data() {return {message: "父组件传过来的值",age: 18,};},components: {Son,},
};
</script>//Son.vue
<template><div class="son"><span>儿子</span><GrandSon v-bind="$attrs"></GrandSon></div>
</template><script>
import GrandSon from "../components/GrandSon.vue";
export default {components: {GrandSon,},created() {console.log("son", this.$attrs);},
};//GrandSon.vue
<template><div class="grandson"><span>孙子</span><div>{{ $attrs.message }}</div></div>
</template><script>
export default {created() {console.log("grandson", this.$attrs);},
};
</script>

组件通信——ref $refs

引用信息会注册在父组件的$ref对象上 vue2/vue3 ref组件通信

//父
<template><div id="app"><TodoItem ref="msg"></TodoItem><p ref="dom"></p></div>
</template><script>
import TodoItem from './components/so.vue'export default {name: 'App',components: {TodoItem},mounted() {console.log(this.$refs)// 通过这种方法给子组件传递数据this.$refs.msg.getmsg("我是tc") // this.$refs.msg指向的是子组件的实例},
}
</script>//子
<template><div class="so"><p>{{ msg }}</p></div>
</template><script>
export default {name: "todo-item",data() {return {msg: ''}},methods: {getmsg(s) {this.msg = s}}
}
</script>

全局状态管理 vueX

vueX详解（1）

vueX详解（2）

路由

路由详解

路由守卫

路由守卫详解

vue3

基础属性

import { computed, ref } from 'vue';
export default {setup() {const count = ref(0);// 定义一个计算属性const doubledCount = computed(() => count.value * 2);return {count,doubledCount};}
};


const fullName = computed({// getterget() {return firstName.value + ' ' + lastName.value},// setterset(newValue) {// 注意：我们这里使用的是解构赋值语法[firstName.value, lastName.value] = newValue.split(' ')}
})

watch

//ref
<script setup lang="ts">
import { watch, ref } from 'vue'
const sum=ref(1);
// New: 新值 | Old: 老值
watch(sum,(New, Old)=>{console.log(`新值:${New} ——— 老值:${Old}`)
})
</script>

//reactive
<script setup lang="ts">import { watch,reactive} from 'vue'// 响应式变量const sum = reactive({value: 1})// watch是一个函数// 第一个参数: 要监听的响应式变量(数据源)// 第二个参数：执行的回调函数// 第三个参数: 配置(例如deep深度监听/immediate是否立即监听等)// 注意：当监听一个对象时,第一个参数数据源必须是函数且返回一个值即 "() => 对象.要监听的属性"watch(() => sum.value, (New, Old) => {console.log(`新值:${New} ——— 老值:${Old}`)}, { immediate: true, deep:ture })
</script>

watchEffect

不需要手动传入依赖（不用指定监听对象）
无法获取原始值，只能获取更新后的值
立即执行（在onMounted前调用）
一些异步操作放里面更加的合适

const count = ref(0)
watchEffect(() => {console.log(count.value)
})

const stop = watchEffect(() => {/* ... */
})
// 停止监听
stop()

副作用清除做一些异步请求连发限制或取消请求的操作，保证请求数据的完整和准确性。

watchEffect(async (onCleanup) => {const { response, cancel } = doAsyncWork(id.value)// `cancel` 会在 `id` 更改时调用// 以便取消之前// 未完成的请求onCleanup(cancel)data.value = await response
})

组件通信

父传子

<Child info="我爱祖国" :money="money"></Child>

子组件获取父组件传递数据:方式1
let props = defineProps({money:{type:Number,default:0
}})子组件获取父组件传递数据:方式2
let props = defineProps(["info",'money']);

子传父

<Event2  @xxx="handler3"></Event2>

<script setup lang="ts">
let $emit = defineEmits(["xxx"]);
const handler = () => {$emit("xxx", "法拉利", "茅台");
};
</script>

v-model

<template><child v-model:name="name"></child>
</template><script setup>
import { ref } from 'vue'
import Child from './Child.vue'const name = ref('XXX')
</script>

<template><input :value="name" @input="updateName" />
</template><script setup>
import { defineProps, defineEmits } from 'vue'const props = defineProps(['name'])
const emit = defineEmits(['update:name'])const updateName = (e) => {emit('update:name', e.target.value)
}
</script>

依赖注入 (Provide/Inject)

<script setup>
import { provide, ref } from 'vue'const themeColor = ref('blue')
provide('theme', themeColor)
</script>

<script setup>
import { inject } from 'vue'const theme = inject('theme')
console.log(theme.value) // 'blue'
</script>

ref

<template><TodoItem :ref="(el) => child = el"></TodoItem><p ref="dom"></p>
</template><script>
import TodoItem from './components/so'
import { ref, onMounted  } from 'vue'export default {name: 'App',components: {TodoItem}
}
</script><script setup>const child = ref(null)// const msg = ref()const dom = ref()onMounted(() => {console.log(child.value.getmsg("我是tc"))// msg.value.getmsg("我是tc")dom.value.innerHTML = "我是一个普通的DOM元素"})
</script>

<template><div class="so"><p>{{ msg }}</p></div></template><script setup>
import { ref, defineExpose } from 'vue'const msg = ref("")
const getmsg = (s) => {msg.value = s
}
// 想要父组件可以获取到需要使用defineExpose向父组件暴露
defineExpose({getmsg})
</script>

事件总线

vue3中移除了事件总线，可以借助于第三方工具来完成，Vue官方推荐 mitt 或 tiny-emitter

全局状态管理 Pinia

Pinia详解

路由

路由详解

路由守卫

vue2、vue3路由区别及原理

vue3路由守卫详解

vue2、vue3生命周期

setup

setup() 钩子是在组件中使用组合式 API 的入口

vue3 setup

【面试 · 一】vue大集合

目录 vue2 基础属性组件通信全局状态管理 vueX 路由路由守卫 vue3 基础属性组件通信全局状态管理 Pinia 路由路由守卫 vue2、vue3生命周期 setup vue2 基础属性 data：用于定义组件的初始数据，必须是一个函数，返回一个对…...

编程日记 2025/8/15 23:05:03

Java 常用的 ORM框架（对象关系映射)

Java 常用的 ORM（对象关系映射）框架有以下几种，每种都有其特点和使用场景： Hibernate ● 特点： ○ 完整的 ORM 框架，功能强大。 ○ 支持缓存机制（一级缓存、二级缓存）。 ○ 支持多种…...

编程日记 2025/8/16 15:56:01

自动化创业机器人：现状、挑战与Y Combinator的启示

自动化创业机器人：现状、挑战与Y Combinator的启示前言 AI驱动的自动化创业机器人，正逐步从科幻走向现实。我们设想的未来是：商业分析、PRD、系统设计、代码实现、测试、运营，全部可以在monorepo中由AI和人类Co-founder协作完成…...

编程日记 2025/8/16 15:59:02

支持向量机

支持向量机（Support Vector Machine，SVM）是一种有监督的机器学习算法，可用于分类和回归任务，尤其在分类问题上表现出色。下面将从原理、数学模型、核函数、优缺点和应用场景等方面详细介绍。原理支持向量机的基本思…...

编程日记 2025/8/15 18:33:13

华为昇腾910B通过vllm部署InternVL3-8B教程

前言本文主要借鉴：VLLM部署deepseek，结合自身进行整理下载模型 from modelscope import snapshot_download model_dir snapshot_download(OpenGVLab/InternVL3-8B, local_dir"xxx/OpenGVLab/InternVL2_5-1B")环境配置 auto-dl上选择单卡…...

编程日记 2025/8/16 1:18:05

ZArchiver解压缩工具：高效解压，功能全面

在使用智能手机的过程中，文件管理和压缩文件的处理是许多用户常见的需求。无论是解压下载的文件、管理手机存储中的文件，还是进行日常的文件操作，一款功能强大且操作简便的文件管理工具都能极大地提升用户体验。今天，我们要介绍的…...

编程日记 2025/8/16 1:18:02

ETL介绍

（一）ETL介绍 “ETL，是英文Extract-Transform-Load的缩写，用来描述将数据从来源端经过抽取（Extract）、转换（Transform）、加载（Load）至目的端的过程。ETL一词较…...

编程日记 2025/8/16 1:18:00

2025.05.07-华为机考第三题300分

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 03. 城市紧急救援队伍协同规划问题描述智慧城市建设中，卢小姐负责设计一套紧急救援队伍协同系统。城市被规划为一个 n n n \times n...

编程日记 2025/8/16 1:17:57

缓存菜品-04.功能测试

一.功能测试 redis中的数据已缓存查询数据时并没有发sql 修改鸡蛋汤价格为5元。缓存数据没有了价格修改成功停售启售是一样的。修改后清理，再次查询又被缓存到redis中。...

编程日记 2025/8/16 1:17:55

跨境电商生死局：动态IP如何重塑数据生态与运营效率

凌晨三点的深圳跨境电商产业园，某品牌独立站运营总监李明（化名）正盯着突然中断的广告投放系统。后台日志显示，过去24小时内遭遇了17次IP封禁，直接导致黑五促销期间损失23%的预期流量。这并非个案——2023年跨境电商行业…...

编程日记 2025/8/16 1:17:53

day 14 SHAP可视化

一、原理——合作博弈论 SHAP（SHapley Additive exPlanations）是一种用于解释机器学习模型预测结果的方法，它基于合作博弈论中的 Shapley 值概念。Shapley 值最初用于解决合作博弈中的利益分配问题。假设有 n 个参与者共同合作完成一项任务并…...

编程日记 2025/8/16 2:59:34

处理PostgreSQL数据库事务死锁过程

查询pg_locks表，获取未得到满足的锁信息： select * from pg_locks where granted is false ; --查询得不到锁的，那就是两个互相等待对方持有的锁查询活动的事务会话进程，和上一步的锁的事务对应起来： select * from …...

编程日记 2025/8/16 2:59:32

大数据、物联网（IoT）、平台架构与设计重构大模型应用

结合大数据、物联网（IoT）、平台架构与设计重构大模型应用，需构建一个数据驱动、实时响应、弹性扩展的智能系统。以下从技术架构、数据流、核心模块设计三个维度展开：一、整体架构设计分层架构（基于云-边-端协同）： [物联网设备层] → [边缘计算层] → [大数据平台层]…...

编程日记 2025/8/16 2:59:31

开发 Chrome 扩展中的侧边栏图标设置实录（Manifest V3）

在开发自己的 Chrome 扩展 Pocket Bookmarks（口袋书签） 的过程中，我遇到了一个看似简单却颇具挑战的问题：如何在扩展的侧边栏显示自定义图标？ 这篇文章记录一下我踩过的坑，以及最终的解决方案。这里说的侧…...

编程日记 2025/8/16 2:59:29

Baumer工业相机堡盟工业相机如何通过BGAPI SDK在Linux系统下设置多个USB相机（C++）

Baumer工业相机堡盟工业相机如何通过BGAPI SDK在Linux系统下设置多个USB相机（C） Baumer工业相机Baumer工业相机BGAPI SDK在Linux系统下设置USB相机的技术背景Linux系统内核 USB 模块内存的修改内存限制的确定使用 GRUB 引导加载程序修改内存限制使用 U-B…...

编程日记 2025/8/16 2:59:27

zst-2001 历年真题知识产权

知识产权 - 第1题发表权有时间限制其他下面3个没有 c 知识产权 - 第2题 bd是财产权 c 知识产权 - 第3题 b 知识产权 - 第4题 d 知识产权 - 第5题 d 知识产权 - 第6题 d 知识产权 - 第7题 d 知识产权 - 第8题 b是国务院发布的 d没有复制权…...

编程日记 2025/8/16 2:59:26

设备与驱动：UART设备

大部分的嵌入式系统都包括一些I/O设备，例如仪器上的数据显示屏、工业设备上的串口通信、数据采集设备上模拟数据采样、用于保存数据的Flash/SD卡以及网络设备上的以太网接口等，都是嵌入式系统中容易找到的I/O设备例子。本专栏主要是分享RT-Thread是如何…...

编程日记 2025/8/16 2:59:24

Linux 服务器静态 IP 配置初始化指南

✅ 第一步：确认网络管理方式运行以下命令判断系统使用的网络管理服务： # 检查 NetworkManager 是否活跃 systemctl is-active NetworkManager# 检查 network（旧服务）是否活跃 systemctl is-active network或者检查配置路径&…...

编程日记 2025/8/16 2:59:22

【ROS2】Nav2源码之行为树定义、创建、加载

1、简述在 Navigation2 里，机器人的导航是一项复杂的任务，包含路径规划、避障、恢复机制等多个子任务。行为树能把这些子任务组织成清晰的层次结构，让机器人可以依据不同的情况做出合理的决策。例如，当机器人在导航途中碰到障碍物时，行为树可以决定是重新规划路径、尝试…...

编程日记 2025/8/16 2:59:20

Redis持久化存储介质评估：NFS与Ceph的适用性分析

#作者：朱雷文章目录一、背景二、Redis持久化的必要性与影响1. 持久化的必要性2. 性能与稳定性问题三、NFS作为持久化存储介质的问题1. 性能瓶颈2. 数据一致性问题3. 存储服务单点故障4. 高延迟影响持久化效率.5. 吞吐量瓶颈四、Ceph作为持久化存储介质的问题1.…...

编程日记 2025/8/16 2:59:18

如何统一修改word中所有英文字母的字体格式

1.需求分析我想让整篇论文中的所有英文字母格式都修改为Time New Roman格式。 2.直观操作流程点击左上角开始 --> 点击替换 --> 点击更多 --> 点击特殊格式 --> 选择查找内容为任意字母(Y) --> 将光标点到替换内容 --> 点击格式 --> 点击字体 --> …...

编程日记 2025/8/16 1:17:24

服务器上机用到的设备

服务器上机通常需要以下硬件设备： 服务器主机： CPU：选择高性能的多核处理器，如英特尔至强（Xeon）系列或AMD EPYC系列，以满足高并发和多任务处理需求。内存（RAM）&#xf…...

编程日记 2025/8/16 2:59:15

【Java ee 初阶】多线程（8）

Synchronized优化： 一、锁升级锁升级时一个自适应的过程，自适应的过程如下： 在Java编程中，有一部分的人不一定能正确地使用锁，因此，Java的设计者为了让大家使用锁的门槛更低，就在synchronize…...

编程日记 2025/8/16 2:59:13

数字孪生大屏UI设计

近年来,5G、大数据、云计算等新一代信息技术的蓬勃发展,计算机仿真技术与拟真软件的成熟运用,让数字孪生技术开始蔓延渗透到“互联网”相关的产业中。数字孪生大屏给予了可视化的数据直观窗口,其中展现的动态映射与实时数据让业务流转效率得到了有效提升,管理、运营和决策都能高…...

编程日记 2025/8/16 2:59:11

【Java ee 初阶】多线程（9）上

一、信号量Semaphore 本质上就是一个计数器，描述了一种“可用资源”的个数申请资源（P操作）：使得计数器-1 释放资源（V操作）：使得计数器1 如果计数器为0了，继续申请资源&#xff…...

编程日记 2025/8/16 2:59:09

eclipse开发环境中缺少JavaEE组件如何安装

新版本eclipse去掉server了吗？在最近新版本的eclipse里面，确实找不到server模块了，无法配置tomcat等web服务器插件了。我们需要自己手工安装一下javaEE组件才行。 1 1：找到自己当前eclipse版本号码 2：去这个地址&…...

编程日记 2025/8/16 2:59:07

目录 1.简介2.逐次逼近型ADC3.基本结构4.输入通道5.转换模式6.触发控制7.数据对齐8.转换时间7.校准10.ADC外围电路11.api和结构体11.1 结构体11.2 api1. ADC_DeInit2. ADC_Init3. ADC_StructInit4. ADC_Cmd5. ADC_DMACmd6. ADC_ITConfig7. ADC_ResetCalibration8. ADC_GetReset…...

编程日记 2025/8/16 2:59:05

从电话到V信语音：一款App实现全场景社交脱身

作为一名资深社恐人士，我深知那些无法脱身的社交场合有多煎熬。上周参加一个行业聚会，面对滔滔不绝的陌生人，我如坐针毡却又找不到合适的离场理由。这时我突然想起之前朋友推荐的一款神器应用，它让我得以优雅脱身。今天就来分享这…...

编程日记 2025/8/16 2:59:03

conda init before conda activate

先conda init 然后退出命令窗口，再重新打开命令窗口再conda activate...

编程日记 2025/8/16 2:59:01

MySQL数据库高可用（MHA）详细方案与部署教程

一：MHA简介核心功能二：MHA工作原理三：MHA组件四：MHA 架构与工具 MHA架构 Manager关键工具 Node工具五：工作原理与流程 1: 故障检测 2: 故障切换（Failover） 3 : 切换模式六&a…...

编程日记 2025/8/16 2:58:59

《Python星球日记》第44天: 线性回归与逻辑回归

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）专栏：《Python星球日记》，限时特价订阅中ing 目录一、引言：回归方法的重要性二、线性回归原理与损失函数1. 线性回归的数学模型2. 损失函数：衡量…...

编程日记 2025/8/15 8:33:37

Flutter TabBar / TabBarView 详解

目录一、引言二、基本用法代码解析三、主要属性 3.1 TabBar 3.2 TabBarView 四、进阶定制：突破默认样式 4.1 视觉样式深度定制 4.2 自定义指示器与标签 4.3 动态标签管理五、工程实践关键技巧 5.1 性能优化方案 5.2 复杂手势处理 5.3 响应式布局…...

编程日记 2025/8/16 2:58:56

001 环境搭建

🦄 个人主页: 小米里的大麦-CSDN博客 🎏 所属专栏: Linux_小米里的大麦的博客-CSDN博客 🎁 GitHub主页: 小米里的大麦的 GitHub ⚙️ 操作环境: Visual Studio 2022 文章目录 Linux 环境搭建全解析：从历史到实践一、Linux 的起源与…...

编程日记 2025/8/16 2:58:54

Spark-core-RDD入门

RDD基本概念 Resilient Distributed Dataset 叫做弹性分布式数据集，是Spark中最基本的数据抽象，是分布式计算的实现载体，代表一个不可变，可分区，里面的元素并行计算的集合。 - Dataset： 一个数据集合&…...

编程日记 2025/8/16 2:58:52

在scala中，转换算子和行动算子有什么区别

在Scala结合Spark编程中，转换算子（Transformation）和行动算子（Action）有以下区别： 执行机制 **转换算子**： 具有惰性求值（延迟计算）特性。它对RDD（弹性分布…...

编程日记 2025/8/16 2:58:50

六级阅读---2024.12 卷一仔细阅读1

文章 Imagine youre an alien sent to Earth to document the behaviour of the mammals inhabiting the planet. You stumble into a movie theatre thats showing the latest Hollywood horror film. Several dozen humans are gathered together in a dark, undercoated r…...

编程日记 2025/8/16 2:58:49

vue2

基础属性

组件通信

全局状态管理 vueX

路由

路由守卫

vue3

基础属性

组件通信

全局状态管理 Pinia

路由

路由守卫

vue2、vue3生命周期

setup

相关文章：