Vue 面试题(二)

目录

上一篇:Vue 常见面试题(一)-CSDN博客

11、Vue 组件 data 为什么必须是函数(必会)

12、讲一下组件的命名规范(必会)

13、怎么在组件中监听路由参数的变化?(必会)

14、怎么捕获 Vue 组件的错误信息?(必会)

15、Vue 组件里的定时器要怎么销毁?(必会)

16、Vue-cli 用自定义的组件?有遇到过哪些问题吗?(必会)

17、Vue 中 slot 的使用方式,以及 slot 作用域插槽的用法(必 会)

18、Vue 该如何实现组件缓存?(必会)

19、跟 keep-alive 有关的生命周期是哪些?(必会)



11、Vue 组件 data 为什么必须是函数(必会)

1、data 组件都是 Vue 的实例
2、组件共享 data 属性,当 data 的值是同一个引用类型的值时,改变其中一个会影响其
3、组件中的 data 写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就
会返回一份新的 data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各
自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份 data,就会造成一个变了全
都会变的结果

12、讲一下组件的命名规范(必会)

给组件命名有两种方式,一种是使用链式命名 my-component,一种是使用大驼峰命名
MyComponent 在字符串模板中<my-component></my-component> 和
<MyComponent></MyComponent>都可以使用,在非字符串模板中最好使用
<MyComponent></MyComponent>,因为要遵循 W3C 规范中的自定义组件名 (字母全小写且必
须包含一个连字符),避免和当前以及未来的 HTML 元素相冲突

13、怎么在组件中监听路由参数的变化?(必会)

有两种方法可以监听路由参数的变化,但是只能用在包含<router-view />的组件内。
第一种
watch: {
'$route'(to, from) {
// 在此处监听
},
},
第二种
beforeRouteUpdate (to, from, next) {
北京市顺义区京顺路 99 号·黑马程序员 www.itheima.com
第 224 页 共 348 页 //这里监听
}

14、怎么捕获 Vue 组件的错误信息?(必会)

1、errorCaptured 是组件内部钩子,当捕获一个来自子孙组件的错误时被调用,接收 error、
vm、info 三个参数,return false 后可以阻止错误继续向上抛出
2、errorHandler 为全局钩子,使用 Vue.config.errorHandler 配置,接收参数与 errorCaptured 一
致,2.6 后可捕捉 v-on 与 promise 链的错误,可用于统一错误处理与错误兜底

15、Vue 组件里的定时器要怎么销毁?(必会)

如果页面上有很多定时器,可以在 data 选项中创建一个对象 timer,给每个定时器取个名
字一一映射在对象 timer 中, 在 beforeDestroy 构造函数中 for(let k in this.timer){clearInterval(k)};
如果页面只有单个定时器,可以这么做
const timer = setInterval(() =>{}, 500);
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})

16、Vue-cli 用自定义的组件?有遇到过哪些问题吗?(必会)

1、在 components 目录新建你的组件文件(indexPage.vue),script 一定要 export default {}
2、在需要用的页面(组件)中导入:import indexPage from '@/components/indexPage.vue'
3、注入到 vue 的子组件的 components 属性上面,components:{indexPage}
4、在 template 视图 view 中使用,例如有 indexPage 命名,使用的时候则 index-page

17、Vue 中 slot 的使用方式,以及 slot 作用域插槽的用法(必 会)

使用方式
当组件当做标签进行使用的时候,用 slot 可以用来接受组件标签包裹的内容,当给 slot
标签添加 name 属性的时候,可以调换响应的位置
插槽作用域
作用域插槽其实就是带数据的插槽,父组件接收来自子组件的 slot 标签上通过 v-bind
绑定进而传递过来的数 据,父组件通过 scope 来进行接受子组件传递过来的数据

18、Vue 该如何实现组件缓存?(必会)

在面向组件化开发中,我们会把整个项目拆分为很多业务组件,然后按照合理的方式组织
起来,那么自然会存在组件之前切换的问题,vue 中有个动态组件的概念,它能够帮助开发者更
好的实现组件之间的切换,但是在面对需求频繁的变化,去要切换组件时,动态组件在切换的过
程中,组件的实例都是重新创建的,而我们需要保留组件的状态,为了解决这个问题,需要使用
到 vue 中内置组件<keep-alive>
<keep-alive></keep-alive> 包裹动态组件时,会缓存不活动的组件实例,主要用于保留组
件状态或避免重新渲染,
简答的说: 比如有一个列表和一个详情,那么用户就会经常执行打开详情=>返回列表=>
打开详情…这样的话列表和详情都是一个频率很高的页面,那么就可以对列表组件使用
<keep-alive></keep-alive>进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,
而不是重新渲染

19、跟 keep-alive 有关的生命周期是哪些?(必会)

1、前言:在开发 Vue 项目的时候,大部分组件是没必要多次渲染的,所以 Vue 提供了一个
内置组件 keep-alive 来缓存组件内部状态,避免重新渲染,在开发 Vue 项目的时候,大部分组件
是没必要多次渲染的,所以 Vue 提供了一个内置组件 keep-alive 来缓存组件内部状态,避免重新
渲染
2、生命周期函数:在被 keep-alive 包含的组件/路由中,会多出两个生命周期的钩
子:activated 与 deactivated。
2.1)activated 钩子:在在组件第一次渲染时会被调用,之后在每次缓存组件被激活时
调用。
2.2)Activated 钩子调用时机: 第一次进入缓存路由/组件,在 mounted 后面,
beforeRouteEnter 守卫传给 next 的回调函数之前调用,并且给因为组件被缓存了,再次进入缓存
路由、组件时,不会触发这些钩子函数,beforeCreate created beforeMount mounted 都不会触发
2.3)deactivated 钩子:组件被停用(离开路由)时调用:deactivated 钩子调用时机:
使用 keep-alive 就不会调用 beforeDestroy(组件销毁前钩子)和 destroyed(组件销毁),因为组件没被
销毁,被缓存起来了,这个钩子可以看作 beforeDestroy 的替代,如果你缓存了组件,要在组件销
毁的的时候做一些事情,可以放在这个钩子里,组件内的离开当前路由钩子 beforeRouteLeave =>
路由前置守卫 beforeEach =>全局后置钩子 afterEach => deactivated 离开缓存组件 => activated
进入缓存组件(如果你进入的也是缓存路由)
20、Vue 常用的修饰符都有哪些?(必会)
.prevent: 提交事件不再重载页面;.stop: 阻止单击事件冒泡;.self: 当事件发生在该元素
本身而不是子元素的时候会触发;.capture: 事件侦听,事件发生的时候会调用

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

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

相关文章

深度学习pytorch——链式法则(Chain rule)(持续更新)

这篇文章将会以深度学习的角度解析链式法则。 基本的求导法则 高中的时候就学过&#xff0c;大学高数也巩固了一遍&#xff0c;这里不再赘述。 深度学习中的链式法则 为什么要讲述深度学习中的链式法则&#xff1f; 通过链式法则&#xff0c;我们可以得到中间层信息&#x…

unbantu Apache的基本配置与配置静态资源访问

目录 前言: 1.Apache介绍 2.安装Apache 3. 测试Apache服务是否启动成功 3.1配置Servername 3.2重启服务 4.配置Apache主页面 5. 配置静态的资源 6.为静态资源设置访问权限(基于源地址) 致谢: 前言: 此博客是基于unbantu的Apache服务的详细解析&#xff0c;在这片博…

Elasticsearch面试系列-03

1. Elasticsearch 中 refresh 和 flush 有什么区别? 整体流程: 1、数据写入buffer缓冲和translog日志文件中。当写一条数据document的时候,一方面写入到mem buffer缓冲中,一方面同时写入到translog日志文件中。 2、buffer满了或者每隔1秒(可配),refresh将mem buffer中的…

MediatR 框架使用FluentValidation对Comand/Query进行自动拦截验证

简介 目录 简介 1. MediatR项目框架 2. 实现步骤 步骤 1&#xff1a;编写管道行为 1. query 查询的管道 2. command命令的管道 步骤 2&#xff1a;注册验证器和管道行为 步骤 3&#xff1a;定义命令类 步骤 4&#xff1a;定义处理程序 步骤 5&#xff1a;编写命令验证器…

34 | 到底可不可以使用join?

在实际生产中&#xff0c;关于 join 语句使用的问题&#xff0c;一般会集中在以下两类&#xff1a; 1. 我们 DBA 不让使用 join&#xff0c;使用 join 有什么问题呢&#xff1f; 2. 如果有两个大小不同的表做 join&#xff0c;应该用哪个表做驱动表呢&#xff1f; 今天这篇文…

机器学习流程—迁移学习 模型微调

文章目录 机器学习流程—迁移学习 模型微调迁移学习的思想主要优点常见的微调 fine-tuning案例一 VGG19鲜花分类器案例二 ResNet图像分类案例三 BERT 情感分析总结机器学习流程—迁移学习 模型微调 一旦你踏进了机器学习领域,就等同于踏进了“终身学习”之旅。因为机器学习领…

【算法刷题 | 二叉树 02】3.21 二叉树的层序遍历01(5题:二叉树的层序遍历、层序遍历||、右视图、层平均值,以及N叉树的层序遍历)

文章目录 5.二叉树的层序遍历5.1 102_二叉树的层序遍历5.1.1问题5.1.2解法&#xff1a;队列 5.2 107_二叉树的层序遍历||5.2.1问题5.2.2解法&#xff1a;队列 5.3 199_二叉树的右视图5.3.1问题5.3.2解决&#xff1a;队列 5.4 637_二叉树的层平均值5.4.1问题5.4.2解决&#xff1…

.NET Core 服务实现监控可观测性最佳实践

前言 本次实践主要是介绍 .Net Core 服务通过无侵入的方式接入观测云进行全面的可观测。 环境信息 系统环境&#xff1a;Kubernetes编程语言&#xff1a;.NET Core ≥ 2.1日志框架&#xff1a;Serilog探针类型&#xff1a;ddtrace 接入方案 准备工作 DataKit 部署 DataK…

探索神经网络:从前端开发者的视角看AI技术

在当今数字化时代&#xff0c;人工智能&#xff08;AI&#xff09;技术正在以惊人的速度发展&#xff0c;并在各个领域展现出巨大的潜力和影响力。其中&#xff0c;神经网络作为AI领域的核心技术之一&#xff0c;引起了广泛的关注和研究。作为一名前端开发人员&#xff0c;了解…

css设置文字在图片上面显示(使用Position及引入背景图片(background-image: url(path)))

<div class"container"><img src"image.jpg" alt"背景图片"><div class"h-title">这里是文字</div><div class"config-title">这里是文字2</div> </div>方法一&#xff1a;使用绝…

Nodejs运行vue项目时,报错:Error: error:0308010C:digital envelope routines::unsupported

前端项目使用( npm run dev ) 运行vue项目时&#xff0c;出现错误&#xff1a;Error: error:0308010C:digital envelope routines::unsupported 经过探索&#xff0c;发现问题所在&#xff0c;主要是nodeJs V17版本发布了OpenSSL3.0对算法和秘钥大小增加了更为严格的限制&#…

4核16G服务器租用优惠价格,26.52元1个月,半年149元

阿里云4核16G服务器优惠价格26.52元1个月、79.56元3个月、149.00元半年&#xff0c;配置为阿里云服务器ECS经济型e实例ecs.e-c1m4.xlarge&#xff0c;4核16G、按固定带宽 10Mbs、100GB ESSD Entry系统盘&#xff0c;活动链接 aliyunfuwuqi.com/go/aliyun 活动链接打开如下图&a…

Go语言介绍

Go语言介绍 Go语言&#xff0c;又称Golang&#xff0c;是由Google公司开发的一种静态类型、编译型的开源编程语言。自2009年发布以来&#xff0c;Go语言凭借其简洁的语法、强大的并发处理能力和出色的跨平台性能&#xff0c;迅速在编程界崭露头角&#xff0c;成为众多开发者的…

ZHUTI主提2024夏季系列 —「逐·行」

ZHUTI主提全新发布2024夏季「逐行」系列&#xff0c;聚焦当下人与自然的关系&#xff0c;以衣为载体&#xff0c;秉承东方哲学的艺术理念&#xff0c;将美学艺术与主流时尚设计融合&#xff0c;赋予当代时装表达新方向&#xff0c;共创现代女性之美。 取自然之意境&#xff0c…

list.sort()Collections.sort()深入理解

list.sort()&&Collections.sort() 文章目录 list.sort()&&Collections.sort()背景相关代码代码一代码二 原理举一反三 业务场景考虑 背景 业务中经常用到List的sort()方法&#xff0c;但是对于其中return的-1&#xff0c;0&#xff0c;1理解不到位&#xff0c…

蓝桥杯 2022 省B 李白打酒加强版

这题用递归暴力的方法如下&#xff1a; #include<iostream> #include<bits/stdc.h> using namespace std; int num; int N,M; void dfs(int now,int n,int m) {if(now<0 || n>N ||m>M)return ;if(nN && mM){if(now1)num1;return;}dfs(now-1,n,m1…

微服务day05(下) -- ES文档操作 + RestApi + RestClient操作文档

3.1.新增文档 语法&#xff1a; POST /索引库名/_doc/文档id {"字段1": "值1","字段2": "值2","字段3": {"子属性1": "值3","子属性2": "值4"},// ... } 示例&#xff1a; # 插…

内网使用rustdesk进行远程协助

文章目录 前言一、搭建rustdesk中继服务器二、搭建文件下载服务器三、创建引导脚本四、使用 前言 内网没有互联网环境&#xff0c;没法使用互联网上有中继服务器的远程协助工具&#xff0c;如teamviewer、todesk、向日癸等&#xff1b;在内网进行远程维护可以自己搭建中继服务…

网络基础「HTTP」

&#x1f52d;个人主页&#xff1a; 北 海 &#x1f6dc;所属专栏&#xff1a; Linux学习之旅、神奇的网络世界 &#x1f4bb;操作环境&#xff1a; CentOS 7.6 阿里云远程服务器 文章目录 1.再谈协议1.1.认识URL1.2.Encode 和 Decode 2.HTTP 协议2.1.协议格式2.2.见一见请求2.…

OpenAI GPT商店面临质量与合规问题;黄仁勋预测:十年内AI将实时生成游戏画面

&#x1f989; AI新闻 &#x1f680; OpenAI GPT商店面临质量与合规问题 摘要&#xff1a;OpenAI旗下的GPT商店因存在大量涉嫌侵权内容、助长学术不诚实行为及违规内容等问题而引起关注。其中包括未经授权使用迪士尼、漫威角色生成内容的GPT模型&#xff0c;以及声称能绕过剽…