Vue系列面试题

大家好,我是有用就扩散,有用就点赞。

1.Vue中组件间有哪些通信方式?

父子组件通信:

(1)props | $emit (接收父组件数据 | 传数据给父组件)

(2)ref | $refs(给普通的DOM元素或者子组件注册引用信息 | 获取通过ref注册的引用)

(3)$parent | $children(获取当前组件的父组件实例 | 获取当前组件的子组件实例)

多层级组件通信:

(1)provide | $inject(提供子组件要使用的数据 | 子组件获取父组件定义的数据)

(2)$attrs | l i s t e n e r s (获取一个组件没有声明 p r o p 时所包含的数据,搭配 i n h e r i t A t t r s : f a l s e 使用,设置继承 listeners(获取一个组件没有声明prop时所包含的数据,搭配inheritAttrs:false使用,设置继承 listeners(获取一个组件没有声明prop时所包含的数据,搭配inheritAttrs:false使用,设置继承attrs默认行为关闭 | 获取包含父作用域中的事件监听器)

非关系组件通信:

(1)(利用vue注册自定义事件)$emit | $on(发送数据 | 获取数据)

(2)Vuex 数据全局状态管理

  • state单一状态树(mapState获取多个状态,state获取数据)

  • mutation 更改Vuex的store中的状态的唯一方法(commit设置数据)

  • getter接受state作为其第一个参数

  • actions处理异步逻辑

(3)ocalstorage和sessionstorage用作存储数据

2.Vue中v-show和v-if的区别是什么?

v-show:是渲染组件,然后改变组件的display为block或none

v-if:是惰性渲染机制,在属性初始为false时,组件就不会被渲染,直到条件为true,并且切换条件时会触发销毁/挂载组件。

如果需要非常频繁地切换,则使用v-show较好;如果在运行时条件很少改变,则使用v-if较好

3.keep-alive组件有什么作用?

1)keep-alive是vue内置的一个组件,可以使被包含的组件保留状态,避免重新渲染。

2)对于keep-alive组件来说,它拥有两个独有的生命周期钩子函数,分别为activated和deactivated。用keep-alive包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行deactivated钩子函数,命中缓存渲染后会执行actived钩子函数。

3)keep-alive几个重要的属性:

  • include - 只有名称匹配的组件会被缓存
  • exclude - 任何名称匹配的组件不会被缓存
  • max - 最多可以缓存多少组件实例

4.说下Vue生命周期钩子函数?

beforeCreate 组件实例刚被创建,组件属性计算之前

created 组件实例创建完成,属性已绑定,但DOM还未生成,$el属性还不存在

beforeMount 模板编译/挂载之前$el还不存在

mounted 模板编译/挂载之后(不保证组件已在DOM中)

beforeUpdate组件更新之前

updated组件更新之后

beforeDestory 组件销毁前调用

destoryed 组件销毁后调用

Vue3支持多个相同生命周期

setup是围绕beforeCreate和created生命周期钩子运行,在setup()内部调用生命周期钩子

在Vue2生命周期钩子前面加上”on“来访问组件的生命周期钩子

5.Vue中computed和watch区别?

computed是计算属性,依赖其他属性计算值,并且computed的值有缓存,只有当计算值变化才会返回内容。

watch监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。

6.v-if和v-for为什么不能连用?

1)v-for优先于v-if被解析,从源码中发现,先处理静态节点,在处理once,在处理for,在处理if,代码显示for的优先级比if高,断点调试也证实for优先于if。在vue3中v-if优先于v-for被解析

2)如果同时使用,每次渲染都会先执行循环在判断条件,无论如何循环都避免不了,浪费了性能。

3)要避免出现这种情况,可以采用多层包裹来解决性能损耗问题。例如外层给标签绑定指令v-if或者是内层标签绑定v-if。

7.单页面应用和多页面应用区别及优缺点?

SPA优点:

(1)用户体验好、快,内容的改变不需要重新加载整个页面,基于这一点SPA对服务器压力较小

(2)前后端分离

(3)页面用户体检比较好

SPA缺点:

(1)不利于SEO

(2)导航不可用,需要自己实现导航

(3)初次加载耗时长

(4)页面复杂度提高

MPA优点:

(1)多页面应用对于SEO更加友好

(2)更容易扩展

(3)更易的数据分析

MPA缺点:

(1)程序开发成本高

(2)增加服务端压力,多页面会不停的加载

(3)用户体验相对较差

8.v-model该如何实现?

v-model本质上是v-on和v-bind的语法糖。v-model在内部为不同元素抛出不同的事件,如:

(1)text和textarea元素使用value属性和input事件

(2)checkbox和radio使用checked属性和change事件

(3)select字段将value作为prop并将change作为事件

(4)v-model作用在普通表单上

<input v-model="myvalue" />
//等同于
<input v-bind:value="myvalue"v-on:input="myvalue=$event.target.value"
/>

(5)v-model作用在组件上

//html
<mycom v-model="myvalue"/>
//等同于
<mycom :value="myvalue" @input="(e)=>{myvalue=e}"/>//mycom
<template>
<div><input :value="value" @input="$emit('input',$event.target.value)"/>
</div>
</template>
<script>
export default {props:['value'],
}
</script>

9.mixin和mixis区别?

mixin用于全局混入,会影响到每个组件实例,通常插件都是这样做初始化的。比如:可以全局混入封装好的ajax或者一些工具函数等。

mixins用于单组件,是最常使用的扩展组件的方式。如果多个组件中有相同的业务逻辑,就可以将这些逻辑剥离出来,通过mixins混入代码。比如上拉下拉加载数据这种逻辑等。

mixin的问题?

(1)来源不清晰问题

(2)命名冲突问题

Vue3中不需要mixin,Vue3类似函数式编程,compostion api可以很好解决复用问题

10.Vue2中为什么检测不到数组的变化,如何解决?

由于JavaScript的限制,Vue不能检测数组变动。Vue2中采用Object.defineProperty来实现数据响应式,Object.definePropery虽然可以监听到数组的变化,但是由于在性能和体验的性价比上考虑,Vue2放弃了这个特性。

在Vue2中想实现数组的响应式可以通过全局Vue.set或者实例方法vm.$set来修改,使得数据变得响应式,也可以通过数组的变异方法来实现(push、pop、shift、unshift、splice、sort、reverse)

欢迎各位大哥投稿PR。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Hutool实现自定义模板引擎,实现json个性化模板引擎转换

文章目录 前言编写引擎类&#xff1a;JsonTemplateEngine编写模板类&#xff1a;CustomTemplate编写测试代码测试json文件测试类 前言 由于百度搜索json模板引擎&#xff0c;推荐的都是一些freemarker之类的&#xff0c;需要引入其他的依赖&#xff0c;而且在编写json模板的时…

学习在测试时学习(Learning at Test Time)_ 具有表达性隐藏状态的循环神经网络(RNNs)

摘要 https://arxiv.org/pdf/2407.04620 自注意力机制在长文本语境中表现良好&#xff0c;但其复杂度为二次方。现有的循环神经网络&#xff08;RNN&#xff09;层具有线性复杂度&#xff0c;但其在长文本语境中的性能受到隐藏状态表达能力的限制。我们提出了一种新的序列建模…

LabVIEW多线圈电磁式振动发电机测试

开发了一种基于LabVIEW设计的多线圈电磁式振动发电机测试系统。系统通过高效的数据采集、波峰检测及相位差计算&#xff0c;优化了传统振动发电机的测试流程&#xff0c;提升了电压波形分析的精度和效率&#xff0c;具有较好的应用前景和推广价值。 项目背景 随着可再生能源技…

跨越数据边界:域适应提升目标检测的泛化之舞

跨越数据边界&#xff1a;域适应提升目标检测的泛化之舞 目标检测模型在实际应用中常常面临泛化能力不足的问题&#xff0c;尤其是在数据源和部署环境不一致的情况下。域适应&#xff08;Domain Adaptation&#xff09;技术通过减少源域&#xff08;有标签数据&#xff09;和目…

遇到not allow unquoted fieldName怎么办

前言 Exception in thread "main" com.alibaba.fastjson2.JSONException: not allow unquoted fieldName, offset 2, character , line 1, column 3, fastjson-version 2.0.25 { "data":null, "code":200, "msg":"成功"…

LIS系统源码,实验室管理信息系统LIS,.Net C#语言开发,支持DB2,Oracle,MS SQLServer等主流数据库

实验室管理信息系统LIS源码&#xff0c;采用.Net C#语言开发&#xff0c;C/S架构。支持DB2&#xff0c;Oracle&#xff0c;MS SQLServer等主流数据库。&#xff08;LIS系统全套商业源码&#xff0c;自主版权&#xff0c;多家大型综合医院应用案例&#xff0c;适合二次开发&…

Golang | Leetcode Golang题解之第279题完全平方数

题目&#xff1a; 题解&#xff1a; // 判断是否为完全平方数 func isPerfectSquare(x int) bool {y : int(math.Sqrt(float64(x)))return y*y x }// 判断是否能表示为 4^k*(8m7) func checkAnswer4(x int) bool {for x%4 0 {x / 4}return x%8 7 }func numSquares(n int) i…

四、GD32 MCU 常见外设介绍 (6) ADC 模块介绍

6.1.ADC 基础知识 12 位逐次逼近式模数转换器模块&#xff08;ADC&#xff09;&#xff0c;可以采样来自于外部输入通道、内部输入通道的模拟信号&#xff0c;采样转换后&#xff0c;转换结果可以按照最低有效位对齐或最高有效位对齐的方式保存在相应的数据寄存器中。 6.2.GD…

elasticsearch-7.3.1安装注意事项

elasticsearch-7.3.1安装注意事项 一、背景二、步骤1、查看原ES版本2、新环境服务器2.1、是否有elasticsearch2.2、安装elasticsearch2.3、配置参数2.4、启动elasticsearch2.5、设置密码 三、报错-问题总结1、jdk不适用2、bootstrap checks failed3、Address already in use4、…

vue3前端开发-小兔鲜项目-图片切换效果和动态class

vue3前端开发-小兔鲜项目-图片切换效果和动态class!这次实现的效果是&#xff0c;图片预览效果&#xff0c;根据小图片&#xff0c;来实时改变大图&#xff08;预览&#xff09;的效果。同时让动态的特征class也跟着显示出来。 <script setup> import {ref} from vue // …

Linux 各目录

Linux 是一个非常严谨的操作系统&#xff0c;每个目录都有自己的作用&#xff0c;这些作用是固定的&#xff0c;没有特殊情况&#xff0c;应严格执行&#xff1b; Linux 中所有东西以文件形式存储和管理&#xff0c;命令也不例外&#xff1b; 以下四个 bin 是二进制文件&…

Boost搜索引擎:如何建立 用户搜索内容 与 网页文件内容 之间的关系

如果想使“用户搜索内容”和“网页文件内容”之间产生联系&#xff0c;就应该将“用户搜索内容”和“网页文件”分为很小的单元 &#xff08;这个单元就是关键词&#xff09;&#xff0c;寻找用户搜索单元是否出现在这个文档之中&#xff0c;如果出现就证明这个网页文件和用户搜…

freesql简单使用操作mysql数据库

参考&#xff1a;freesql中文官网指南 | FreeSql 官方文档 这两天准备做一个测试程序&#xff0c;往一个系统的数据表插入一批模拟设备数据&#xff0c;然后还要模拟设备终端发送数据包&#xff0c;看看系统的承压能力。 因为系统使用的第三方框架中用到了freesql&#xff0c…

数据库的事务隔离级别有哪些?

并行事务会引发什么问题&#xff1f; 同时处理多个事务的时候&#xff0c;就可能出现脏读&#xff08;dirty read&#xff09;、不可重复读&#xff08;non-repeatable read&#xff09;、幻读&#xff08;phantom read&#xff09;的问题。脏读: 如果一个事务「读到」了另一个…

智能无人机检测:基于YOLO和深度学习的全流程实现

简介 随着无人机技术的快速发展&#xff0c;无人机在各个领域的应用越来越广泛。为了增强无人机的智能化水平&#xff0c;目标检测技术变得尤为重要。本文将介绍如何使用YOLO模型&#xff08;YOLOv8/v7/v6/v5&#xff09;构建一个基于深度学习的无人机目标检测系统&#xff0c…

NSSCTF-2021年SWPU联合新生赛

[SWPUCTF 2021 新生赛]finalrce 这道题目考察tee命令和转义符\ 这题主要是&#xff0c;遇到一种新的符号&#xff0c;"\"—转义符。我理解的作用就是在一些控制字符被过滤的时候&#xff0c;可以用转义符&#xff0c;让控制符失去原本的含义&#xff0c;变为字面量…

react中配置路径别名@

1.说明 在react项目中想要使用代替“src/”需要在项目根目录下配置两个文件&#xff0c;craco.config.js和sconfig.json&#xff1b; craco.config.js配置文件是用于项目解读为“src/” jsconfig.json配置文件是用于vsCode在编辑过程是输入后可以将src下的文件目录进行自动联…

k8s中部署Jenkins、SonarQube、StorageClass部署流程

部署Jenkins 系统环境&#xff1a; • kubernetes 版本&#xff1a;1.23.3 • jenkins 版本&#xff1a;2.172 • jenkins 部署示例文件 Github 地址&#xff1a;https://github.com/my-dlq/blog-example/tree/master/jenkins-deploy 一、设置存储目录 在 Kubenetes 环境下…

[DVWA靶场实战]-SQL注入攻击(命令注入+SQL回显注入+sqlmap工具实现自动化注入)详细教程

原理与内容 1.命令注入原理 以Windows系统的DOS命令为例&#xff0c;DOS命令可以查看本地网络、系统用户、当前目录、字符串查找&#xff0c;也可以复合命令。命令注入就是利用复合命令的特点&#xff0c;通过Web程序&#xff0c;在服务器上&#xff0c;拼接系统命令&#xf…

elk日志索引被锁blocks,日志无法写入

现象&#xff1a; kafka积压&#xff0c;logstash无法将日志写入到es logstash报错&#xff1a; [logstash.outputs.elasticsearch][main][] Retrying failed action {:status>403 :error>{“type”>“cluster_block_exception”, “reason”>“index [] blocked …