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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/947827.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux(Centos 7.6)命令详解:ls

1.命令作用 列出目录内容(list directory contents) 2.命令语法 Usage: ls [OPTION]... [FILE]... 3.参数详解 OPTION: -l,long list 使用长列表格式-a,all 不忽略.开头的条目(打印所有条目,包括.开头的隐藏条目&#xff09…

一文读懂主成分分析法(PCA)

主成分分析法(PCA) 主成分分析法(PCA)主成分分析的基本思想主成分的计算主成分分析的原理主成分分析的特点主成分分析的应用 主成分分析法(PCA) 主成分分析的基本思想 PCA是1901 年Pearson在研究回归分析…

LLVM防忘录

目录 Windows中源码编译LLVMWindows下编译LLVM Pass DLL Windows中源码编译LLVM 直接从llvm-project下载源码, 然后解压后用VS2022打开该目录, 然后利用VS的开发终端执行: cmake -S llvm -B build -G "Visual Studio 17 2022" -DLLVM_ENABLE_PROJECTSclang -DLLVM_…

adb 不是内部或外部命令,也不是可运行的程序或批处理文件。

1、问题概述? 本文讲述的是在window系统中安装了Android SDK之后,adb无法使用的情况。 在cmd中执行adb devices提示如下问题: adb 不是内部或外部命令,也不是可运行的程序或批处理文件。 问题:没有配置android sdk环…

Leetcode 第426场周赛分析总结

3370. 仅含置位位的最小整数 AC代码 class Solution { public:int smallestNumber(int n) {int x 1;while (x - 1 < n) {x << 1;}return x - 1;} };分析总结 也可以先直接获取n的长度&#xff0c;然后计算得到&#xff0c;这样时间复杂度由O(logn)优化为O(1) 在C…

【从零开始入门unity游戏开发之——unity篇05】unity6基础入门——运行游戏按钮、Game游戏窗口和Project项目窗口介绍

文章目录 运行游戏按钮、Game游戏窗口和Project项目窗口一、运行游戏按钮二、Game游戏窗口1、右上角设置1.1 如果没有相机渲染则发出警告1.2 在”编程模式”下清除每一帧1.3 窗口最大化 2、上方工具&#xff08;1&#xff09;切换手机模拟器&#xff08;2&#xff09;切换不同显…

九、Vue 事件处理器

文章目录 前言一、基础事件绑定:v-on 指令二、方法调用:组织有序的交互逻辑三、事件修饰符阻止冒泡与默认事件捕获与自身触发单次触发与鼠标按键区分四、按键修饰符前言 在 Vue.js 的交互世界里,事件处理器起着举足轻重的作用,它让页面从静态展示迈向动态交互,精准捕捉用户…

【项目】基于趋动云平台的Stable Diffusion开发

【项目】基于趋动云平台的Stable Diffusion开发 &#xff08;一&#xff09;登录趋动云&#xff08;二&#xff09;创建项目&#xff1a;&#xff08;三&#xff09;初始化开发环境&#xff1a;&#xff08;四&#xff09;运行代码&#xff08;五&#xff09;运行模型 &#xf…

VSCode下配置Blazor环境 断点调试Blazor项目

VSCode下使用Blazor的环境配置和插件推荐 Blazor是一种用于构建交互式Web UI的.NET框架&#xff0c;它可以让你使用C#、Razor和HTML进行Web开发&#xff0c;而不需要JavaScript。在这篇文章中&#xff0c;我们将介绍如何在VSCode中配置Blazor环境&#xff0c;并推荐一些有用的…

word文档中的文档网格——解决相同行间距当显示出不同行间距的情况

1 问题 被一个行间距调疯了&#xff0c;就是样式改了没用&#xff0c;格式刷刷了没用。就是肉眼可以看出行间距完全不一样。 2 解决方法 1&#xff09;修改论文正文(即出现问题文本的样式)样式&#xff1a;样式>修改>格式>段落>缩进和间距>取消"如果定义了…

ubuntu如何禁用 Snap 更新

.禁用 Snap 更新&#xff08;通过修改 snapd 配置&#xff09; 打开并编辑 /etc/apt/apt.conf.d/50unattended-upgrades文件。 这个文件控制自动更新的行为。 sudo vim /etc/apt/apt.conf.d/50unattended-upgrades 里面有一行将里面的auto改为false即可禁用更新&#xff1a;…

UniApp 原生插件开发指南

一、UniApp 原生插件开发引言 在当今的移动应用开发领域&#xff0c;跨平台开发已成为主流趋势&#xff0c;而 UniApp 作为一款强大的跨平台开发框架&#xff0c;备受开发者青睐。它凭借 “一套代码&#xff0c;多端运行” 的特性&#xff0c;极大地提高了开发效率&#xff0c…

JVM实战—9.线上FGC的几种案例

大纲 1.如何优化每秒十万QPS的社交APP的JVM性能(增加S区大小 优化内存碎片) 2.如何对垂直电商APP后台系统的FGC进行深度优化(定制JVM参数模版) 3.不合理设置JVM参数可能导致频繁FGC(优化反射的软引用被每次YGC回收) 4.线上系统每天数十次FGC导致频繁卡顿的优化(大对象问题…

电脑找不到mfc110.dll文件要如何解决?Windows缺失mfc110.dll文件快速解决方法

一、mfc110.dll文件的重要性 mfc110.dll&#xff0c;全称Microsoft Foundation Class Library 110&#xff0c;是Microsoft Visual C Redistributable for Visual Studio 2012的一部分。这个动态链接库&#xff08;DLL&#xff09;文件对于支持基于MFC&#xff08;Microsoft F…

《机器学习》——数据标准化(0~1标准化,z标准化)

文章目录 数据标准化一、什么是标准化二、常用标准化0~1标准化z标准化 三、注意事项 数据标准化 一、什么是标准化 数据标准化是一种数据预处理技术&#xff0c;用于将数据按照一定的规则进行变换&#xff0c;使得不同特征或变量具有可比性和一致性。作用 消除量纲影响 在实际…

【Vim Masterclass 笔记02】第3章:Vim 核心知识 + L08:Vim 核心浏览命令 + L09:Vim 核心浏览命令同步练习

文章目录 Section 3&#xff1a;Vim Essentials&#xff08;Vim 核心知识&#xff09;S03L08 Essential Navigation Commands1 光标的上下左右移动2 上 / 下翻页3 基于单词前移4 基于单词后移5 重新定位视图中的文本&#xff08;页面重绘&#xff09;6 定位到所在行的行首7 光标…

2025工作管理综合指南:Jira、Confluence等Atlassian工具套件在工作管理中的应用

在高效的工作场所中&#xff0c;沟通、协作与协调是驱动团队效能与生产力提升的核心要素。企业需构建无缝信息流、顺畅的交接与标准化的流程&#xff0c;以确保无论团队采用何种工作模式——面对面、远程或混合——都能实现高效运作。一套强大的工作管理解决方案&#xff0c;作…

MyBatis-plus sql拦截器

因为业务需求&#xff0c;重新写了一套数据权限。项目中用的是mybtis-plus&#xff0c;正好MyBatis-Plus提供了插件数据权限插件 | MyBatis-Plus&#xff0c;那就根据文档来实现这个需求。 实现&#xff1a; 实现MultiDataPermissionHandler 首先创建MultiDataPermissionHan…

vue导入导出excel、设置单元格文字颜色、背景色、合并单元格(使用xlsx-js-style库)

npm i xlsx-js-style <template><button click"download">下载 Excel 表格</button><el-table :data"tableData" style"width: 100%"><el-table-column prop"date" label"日期" width"180…

Ansys Discovery 中的网格划分方法:探索模式

本篇博客文章将介绍 Ansys Discovery 中可用于在探索模式下进行分析的网格划分方法。我们将在下一篇博客中介绍 Refine 模式下的网格划分技术。 了解 Discovery Explore 模式下的网格划分 网格划分是将几何模型划分为小单元以模拟系统在不同条件下的行为的过程。这是通过创建…