vue面试题|[2025-1-3]
1.v-if和v-show的区别?
都是可以控制元素的显示和隐藏
1.v-show是控制元素的display值来让元素显示和隐藏;v-if显示(隐藏)时会把整个DOM元素添加(删除)
2.v-show只是简单的css切换;v-if有一个局部编译/卸载的过程,切换这个过程中会适当的销毁和重建内部的事件监听和子组件
3.v-show的切换效率比较高;v-if的效率比较低;
2.如何理解MVVM?
是Model-View-ViewModel的缩写。前端开发的架构模式。
M:模型,对应的就是data的数据
V:视图,用户界面,DOM
VM:视图模型,Vue的实例对象,连接View和Model的桥梁
核心就是提供对View和Model的双向数据绑定。当数据变化的时候,ViewModel能监听到数据的变化,自动更新视图;当用户操作视图的时候,ViewModel也可以监听到视图的变化,然后通知数据进行改动,这就实现了双向绑定。
ViewModel通过双向绑定把ViewModel连接起来,他们之间的同步是自动的,不需要人为干涉,所以我们只需要关注业务逻辑即可,不需要操作DOM,同时也不需要关注数据的状态问题,因为她是由MVVM统一管理。
3.v-for中的key值的作用是什么?
key属性是DOM元素的唯一标识
作用:
1.提高虚拟DOM的更新
2.若不设置key,可能会触发一些bug
3.为了触发过渡效果
4.说一下你对vue生命周期的理解
组件从创建到销毁的过程就是它的生命周期。
创建
beforeCreate:在这个阶段属性和方法都不能使用
created:这里是实例创建完成之后,完成了数据监测,可以使用数据,修改数据,不会触发updated,也不会更新视图
挂载
beforeMount:完成了模板的编译,虚拟DOM也完成创建,即将渲染,修改数据,不会触发updated
mounted:把编译好的模板挂载到页面,这里可以发送异步请求也可以访问DOM节点
更新
beforeUpdate:组件数据更新之前使用,数据是新的,页面上的数据是旧的,组件即将更新,准备渲染,可以改数据
updated:render重新做了渲染,这时数据和页面都是新的,避免在此更新数据
销毁
beforeDestroy:实例销毁前,在这里实例还可以用,可以清除定时器等等
destroyed:组件已经销毁了,全部都销毁
使用了keep-alive时会多出两个周期:
activated:组件激活时
deactivited:组件被销毁时
5.在created和mounted去请求数据,有什么区别?
created:在渲染前调用,通常先初始化属性,然后做渲染
mounted:在模板渲染完成后,一般都是初始化页面后,再对元素节点进行操作
在这里请求数据可能会出现闪屏的问题,created里不会
一般用created请求数据比较多
请求数据对DOM有影响,那么使用created
如果请求的数据对DOM无关,可以放在mounted
相关文章:
vue面试题|[2025-1-3]
1.v-if和v-show的区别? 都是可以控制元素的显示和隐藏 1.v-show是控制元素的display值来让元素显示和隐藏;v-if显示(隐藏)时会把整个DOM元素添加(删除) 2.v-show只是简单的css切换;v-if有一个局…...
微信小程序中的 storage(本地存储)和内存是两个完全不同的存储区域
这是一个非常关键且容易混淆的概念 既然 this.globalData.appId appId 是将 appId 存储在内存中,为什么微信小程序中的 wx.getStorage 和 wx.setStorage(本地存储)中没有 appId,并且您提出了一个非常重要的疑问:stor…...
时序优化方法
1.rtl级 1.1避免组合逻辑级数过深 当组合逻辑级数过深时,如果时序允许,可以通过插入时序逻辑来打断组合逻辑链。 1.2寄存器复制 如果是由于fanout过大,可以通过寄存器复制,来减小扇出。 1.3逻辑展平,消除优先级 …...
网络游戏之害
网络游戏之害: 网络游戏于今之世风靡四方,其娱人耳目、畅人心怀之效,固为人知,然所藏之害,若隐伏之暗潮,汹涌而至时,足以覆舟,尤以青年为甚,今且缕析其害,以…...
被催更了,2025元旦源码继续免费送
“时间从来不会停下,它只会匆匆流逝。抓住每一刻,我们才不会辜负自己。” 联系作者免费领💖源💖码。 三联支持:点赞👍收藏⭐️留言📝欢迎留言讨论 更多内容敬请期待。如有需要源码可以联系作者免…...
Springboot - Web
Spring Boot 是一个用于简化 Spring 应用程序配置和部署的框架。它提供了一种快速开发的方式,通过默认配置、自动化配置等特性,使得开发者能够更快捷地构建和部署基于 Spring 的应用。 Spring Boot Web 是 Spring Boot 的一个子模块,它专注于…...
Flutter中的网络请求图片存储为缓存,与定制删除本地缓存
Flutter中的网络请求图片存储为缓存,与定制删除本地缓存 1:封装请求图片函数 2:访问的图片都会转为本地缓存,当相同的请求url,会在本地调用图片 3:本地缓存管理【windows与andriod已经测试】【有页面】【有…...
智汇厦门:苏哒智能携其智能化产品亮相文心中国行现场
2025年1月2日,文心中国行再次踏足美丽的鹭岛厦门。 本次的文心中国行活动不仅有来自政府、高校及企业的精英专家将齐聚一堂,分享AI与大模型的最新研究成果,还正式揭牌百度飞桨(厦门)人工智能产业赋能中心,…...
SQL 分析函数与聚合函数的组合应用
目标:掌握 SQL 中分析函数(窗口函数)与聚合函数的组合使用,通过实际案例实现复杂业务需求,如同比、环比和趋势分析。 1. 分析函数与聚合函数的区别 聚合函数(Aggregate Functions):…...
【Elasticsearch入门到落地】5、安装IK分词器
接上篇《4、Elasticsearch的安装》 上一篇我们进行了Elasticsearch以及Kibana的环境准备及软件安装,本篇我们安装最后一个支持软件IK分词器。 一、IK分词器概念 我们再来回顾一下上一张IK分词器的概念: IK分词器(IK Analyzer)是…...
8、RAG论文笔记(Retrieval-Augmented Generation检索增强生成)
RAG论文笔记 1、 **研究背景与动机**2、方法概述3、RAG 模型架构3.1总体架构3.2 Generator(生成器)3.3 检索器(Retriever)3.4训练(Training)3.5**解码方法**(求近似 )3.6微调的参数 …...
【论文笔记】Contrastive Learning for Sign Language Recognition and Translation
🍎个人主页:小嗷犬的个人主页 🍊个人网站:小嗷犬的技术小站 🥭个人信条:为天地立心,为生民立命,为往圣继绝学,为万世开太平。 基本信息 标题: Contrastive Learning for…...
《C++设计模式》策略模式
文章目录 1、引言1.1 什么是策略模式1.2 策略模式的应用场景1.3 本文结构概览 2、策略模式的基本概念2.1 定义与结构2.2 核心角色解析2.2.1 策略接口(Strategy)2.2.2 具体策略实现(ConcreteStrategy)2.2.3 上下文(Cont…...
细说STM32F407单片机轮询方式CAN通信
目录 一、项目介绍 二、项目配置 1、时钟、DEBUG、USART6、NVIC、GPIO、CodeGenerator 2、CAN1 (1)Bit Timings Parameters组,位时序参数 (2)Basic Parameters组,基本参数 (3)…...
perf:对hutool的BeanUtil工具类做补充
分享一个自定义的BeanUtil,继承的是hutool的工具类,然后自己扩充了几个方法; 1、实现了两个对象覆盖非空属性的功能(经常使用),不需要设置CopyOptions; 2、两个对象,对指定前缀的属…...
【数据结构】栈与队列(FIFO)
在阅读该篇文章之前,可以先了解一下堆栈寄存器和栈帧的运作原理:<【操作系统】堆栈寄存器sp详解以及栈帧>。 栈(FILO) 特性: 栈区的存储遵循着先进后出的原则。 例子: 枪的弹夹,最先装进去的子弹最后射出来,最后装入的子弹…...
02.01、移除重复节点
02.01、[简单] 移除重复节点 1、题目描述 编写代码,移除未排序链表中的重复节点。保留最开始出现的节点。 2、解题思路 为了实现这一目标,我们可以使用一个哈希表(或集合)来记录已经遇到的节点值,逐步遍历链表并删…...
Spring thymeleaf 的快速默认搭建使用
Spring thymeleaf 的快速默认搭建使用 thymeleaf 的搭建Pom 文件 thymeleaf 的使用Controller返回参数String资源文件路径访问端点显示HTML页面 thymeleaf 的搭建 Pom 文件 Pom 文件引入 spring-boot-starter-thymeleaf 依赖 <dependency><groupId>org.springfra…...
unity学习3:如何从github下载开源的unity项目
目录 1 网上别人提供的一些github的unity项目 2 如何下载github上的开源项目呢? 2.1.0 下载工具 2.1.1 下载方法1 2.1.2 下载方法2(适合内部项目) 2.1.3 第1个项目 和第4项目 的比较 第1个项目 第2个项目 第3个项目 2.1.4 下载方法…...
印象笔记07——试一试PDF标注
印象笔记07——试一试PDF标注 [!CAUTION] 根据第六期,我再次查询了资料,印象笔记还是有一些可圈可点的功能的(当然部分有平替),针对会员作用,开发使用场景虽然是逆向的,但我坚信这是一部分人的现…...
Logback的使用
1、基本认识 logback官方文档:http://logback.qos.ch 具体样例:https://www.baeldung.com/logback 从下面依赖关系图可以看见,Springboot的核心启动器spring-boot-stater依赖了spring-boot-starter-looging,而这个就是日志的启动器…...
沙箱模拟支付宝支付3--支付的实现
1 支付流程实现 演示案例 主要参考程序员青戈的视频【支付宝沙箱支付快速集成版】支付宝沙箱支付快速集成版_哔哩哔哩_bilibili 对应的源码在 alipay-demo: 使用支付宝沙箱实现支付功能 - Gitee.com 以下是完整的实现步骤 1.首先导入相关的依赖 <?xml version"1…...
微信小程序滑动解锁、滑动验证
微信小程序简单滑动解锁 效果 通过 movable-view (可移动的视图容器,在页面中可以拖拽滑动)实现的简单微信小程序滑动验证 movable-view 官方说明:https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.ht…...
Redis的常用命令
Redis中文字典网站 redis 命令手册https://redis.com.cn/commands.html Keys * 查看当前库所有的key exists ke 判断某个key是否存在 type key查看你的key是什么类型 Del key删除执行的key数据 unlink key非阻塞删除,仅仅将keys从keyspace元数据中删除…...
国内Ubuntu环境Docker部署 ComfyUI
国内Ubuntu环境Docker部署 ComfyUI 趁着这两天用docker部署了 Stable Diffusion,顺手也安排上 ComfyUI。 ComfyUI相比 Stable Diffusion 原生的 WEB UI,更容易让人了解其出图的过程,极其适合学习与研究。拼接其强大的插件节点、不仅能够实现文…...
Meta 的新策略,将 AI 生成的角色整合到其社交媒体平台
一、Meta新年规划及引人注目的举措 多元规划背景:在新的一年,Meta制定了多维度的战略规划,旨在巩固并拓展其在科技领域的影响力。增强现实与元宇宙是其长期布局的重点方向,期望借此塑造未来互联网的交互形态;面对TikTo…...
玩转OCR | 腾讯云智能结构化OCR初次体验
目录 一、什么是OCR(需要了解) 二、产品概述与核心优势 产品概述 智能结构化能做什么 举例说明(选看) 1、物流单据识别 2、常见证件识别 3、票据单据识别 4、行业材料识别 三、产品特性 高精度 泛化性 易用性 四、…...
蓝桥杯JAVA--003
需求 2.代码 public class RegularExpressionMatching {public boolean isMatch(String s, String p) {if (p.isEmpty()) {return s.isEmpty();}boolean firstMatch !s.isEmpty() && (s.charAt(0) p.charAt(0) || p.charAt(0) .);if (p.length() > 2 && p…...
STC51和STM32单片机烧录引脚的完整名称
STC51 和 STM32 单片机烧录引脚的完整名称 1. STC51 单片机的烧录引脚 STC51 单片机通过 串口(UART) 进行程序下载,主要引脚如下: 引脚名称完整英文名称说明TXDTransmit Data串口发送引脚,用于发送数据。RXDReceive…...
阿里云大模型ACP高级工程师认证模拟试题
阿里云大模型ACP高级工程师认证模拟试题 0. 引言1. 模拟试题单选题多选题单选题多选题单选题多选题单选题多选题单选题多选题单选题多选题单选题多选题单选题多选题单选题多选题单选题多选题单选题多选题单选题多选题单选题多选题单选题单选题单选题多选题多选题单选题多选题单…...
深入理解计算机中的补码、反码、原码
问题: 我们每天用的钟表,其实只有1~12这12个数字,但我们日常会说13点、17点之类的。 问:13点在钟表上哪个位置? 答:很简单嘛,1点的位置。 你不觉得奇怪吗,为啥13点会和1点在同一个位…...
调试:用电脑开发移动端网页,然后用手机真机调试
一、背景 电脑开发移动端,然后想真机调试... 二、实现 2.1、电脑和手机链接相同局域网 2.2、pnpm run dev 启动项目 2.3、浏览器访问 localhost:3001/login 2.4、Windowsr 输入cmd,在cmd输入 ipconfig 2.5、浏览器访问 ip地址加/login 2.6、手机端…...
深入浅出:Spring Boot 自定义消息转换器的实现与应用
Spring Boot 作为当前最流行的 Java Web 开发框架之一,广泛应用于微服务架构、企业级应用等多个场景。Spring Boot 提供了灵活且易于扩展的架构,其中消息转换器(Message Converter)是其重要组成部分。消息转换器在 Spring Boot 中…...
基于AI大模型的医院SOP优化:架构、实践与展望
一、引言 1.1 研究背景与意义 近年来,人工智能(AI)技术取得了迅猛发展,尤其是大模型的出现,为各个领域带来了革命性的变化。在医疗领域,AI 医疗大模型正逐渐崭露头角,展现出巨大的应用潜力。随着医疗数据的海量积累以及计算能力的大幅提升,AI 医疗大模型能够对复杂的…...
Maven项目集成SQL Server的完整教程:从驱动配置到封装优化
前言 在最近的系统对接过程中,由于对方团队不熟悉技术,最终选择直接提供 SQL Server 视图。本文详细记录了使用 Maven 集成 SQL Server 驱动的过程,以及从配置到查询的各个关键步骤,还包括注意事项与常见问题,希望对需…...
Java 21 优雅和安全地处理 null
在 Java 21 中,判断 null 依然是开发中常见的需求。通过使用现代 Java 提供的工具和特性,可以更加优雅和安全地处理 null。 1. 使用 Objects.requireNonNull Objects.requireNonNull 是标准的工具方法,用于快速判断并抛出异常。 示例 import java.util.Objects;public c…...
Java(四十四)file
Java中的file类:代表文件或者文件夹(目录)类,也就是说将文件或者文件夹通过File类来封装成对象。 一:常用的构造方法: 使用file类,需要通过构造方法创建一个file对象。 1:public File(String pathname) public static void main(String[] args) {File fl = new File(&…...
【51项目】51单片机自制小霸王游戏机
视频演示效果: 纳新作品——小霸王游戏机 目录: 目录 视频演示效果: 目录: 前言:...
【ArcGISPro/GeoScenePro】检查多光谱影像的属性并优化其外观
数据 https://arcgis.com/sharing/rest/content/items/535efce0e3a04c8790ed7cc7ea96d02d/data 操作 其他数据 检查影像的属性 熟悉检查您正在使用的栅格属性非常重要。...
《新概念模拟电路》-三极管
三极管 本系列文章主要学习《新概念模拟电路》中的知识点。在工作过程中,碰到一些问题,于是又翻阅了模电这本书。我翻阅的是ADI出版的,西安交通大学电工中心杨建国老师编写的模电书。 <模电>和《数电》这两本书是电子学的专业基础课&…...
K 近邻算法入门指南:明氏距离与皮尔森距离的基础讲解
1、K近邻算法介绍 K近邻(k-Nearest Neighbor,KNN)分类算法的思路是:在特征空间中,如果一个样本附近的k个最近样本的大多数属于某一个类别,则该样本也属于这个类别。K近邻算法中,所选择的邻居都是已经正确分类的对象。…...
如何验证imap是否生效
要验证您的 Outlook 邮箱是否启用了 IMAP 并且正常工作,可以按照以下步骤进行操作: 1. 确认 Outlook 邮箱是否启用 IMAP 步骤: 登录到您的 Outlook Web 账户: 打开浏览器,访问 Outlook.com 或 Microsoft 365 Outlook…...
MySQL 06 章——多表查询
多表查询,也称为关联查询,是指两个表或多个表一起完成查询操作 前提条件,这些一起查询的表之间是有关系的(一对一、一对多),它们之间一定是有关联字段的。这个关联字段可能建立了外键,也可能没…...
转换VMware Esxi 虚拟机到 Windows2019 Hyper-V Server
Hyper-v专用P2V工具disk2vhd实际应用 工具介绍 disk2vhd是一个非常小的P2V转换工具,可以将你的物理服务器或Esxi vm 转换成为VHD或者vhdx格式的虚拟硬盘文件,然后在虚拟平台上作为一台虚拟机来使用。目前disk2vhd的最新版本是2.0.1,已经可以…...
头歌实训2-1:面向对象程序设计-基础部分
第1关:定义银行员工类BankEmployee 本关任务:编写银行员工类BankEmployee,要求: 1.银行员工类的属性包括姓名name,工号num,工资salary 2.姓名name和工号num设置为私有属性,并将salay设置为默认参数3000 平…...
超高分辨率 图像 分割处理
文章大纲 制造业半导体领域高分辨率图像半导体数据集开源的高分辨率晶圆图像数据集1. WM-811K数据集2. Kaggle上的WM-811K Clean Subset数据集医疗 病理领域高分辨率图像1. Camelyon+2. CAMELYON173. CPIA Dataset4. UCF-WSI-Dataset航拍 遥感中的高分辨率 图像航拍遥感领域高分…...
使用 apply 方法将其他列的值传入 DataFrame 或 Series 的函数,来进行更灵活的计算或操作
可以使用 apply 方法将其他列的值传入 DataFrame 或 Series 的函数,来进行更灵活的计算或操作。apply 方法允许你逐行或逐列地对 DataFrame 或 Series 的元素进行操作,而且你可以将其他列的值作为参数传递给函数。 示例:使用 apply 结合其他…...
[CTF/网络安全] 攻防世界 warmup 解题详析
查看页面源代码,发现source.php 得到一串代码,进行代码审计: <?phpclass emmm{public static function checkFile(&$page){$whitelist ["source">"source.php","hint">"hint.php"];…...
力扣第389题—找不同
class Solution:def findTheDifference(self, s: str, t: str) -> str:# 对字符串 s 和 t 进行排序a sorted(s)b sorted(t)# 比较排序后的两个列表for i in range(len(a)):if a[i] ! b[i]:return b[i]# 如果前面的比较没有找到差异,那么差异字符在 t 的最后一个…...
vite6+vue3+ts+prettier+eslint9配置前端项目(后台管理系统、移动端H5项目通用配置)
很多小伙伴苦于无法搭建一个规范的前端项目,导致后续开发不规范,今天给大家带来一个基于Vite6TypeScriptVue3ESlint9Prettier的搭建教程。 目录 一、基础配置1、初始化项目2、代码质量风格的统一2.1、配置prettier2.2、配置eslint2.3、配置typescript 3、…...