【前端vue2面试题】2023前端最新版vue2模块,高频24问

1d43f75f092a4050a8ce31e2d85f6868.gif

🥳博       主:初映CY的前说(前端领域)

🌞个人信条:想要变成得到,中间还有做到!

🤘本文核心:博主收集的关于vue2面试题

目录

 vue2面试题

1、$route 和 $router的区别

2、一个.vue文件由几部分组成,分别什么含义

3、scoped作用与原理

4、组件通信有哪些方式

5.为什么data属性是一个函数而不是一个对象

6、vue生命周期分为几个阶段,几个钩子函数,分别写出来

7、axios的请求方式

8、说出$nextTick的作用

9、如何实现组件缓存

10.MVVM与MVC的区别是什么

11.Vue常用修饰符有哪些

12.为什么避免v-for和v-if在一起使用

13.Vue中Key值作用

14.Vue中有时候数组会更新页面,有时候不更新为什么

 15.计算属性与侦听器的区别

16.vue组件传值

17.vue中解决跨域做法

18.什么是虚拟 DOM

19.diff算法

20.slot用法

21.vue.use

22.自定义指令的用法

23.vue3对比vue2区别

         24.路由守卫作用/对比axios拦截器


 vue2面试题

1、$route 和 $router的区别

 $router 是VueRouter的实例,在script标签中想要导航到不同的URL,使用  $router.push方法

 $route为router跳转对象,里面可以获取当前路由的name,path,query,parmas等。


2、一个.vue文件由几部分组成,分别什么含义

由三部分组成:

1.<template>所需要渲染的区域</template>

2.<script>存放引入的资源与业务实现的数据与操作</script>

3.<style>存放界面css的样式</style>

3、scoped作用与原理

作用:组件css作用域,避免子组件内部的css样式被父组件覆盖

  • 默认情况下,如果子组件和父组件css选择器权重相同,优先加载父组件css样式

原理:给元素添加一个自定义属性 v-data-xxxxx, 通过属性选择题来提高css权重值


4、组件通信有哪些方式

  1. 通过 props 传递
  2. 通过 $emit 触发自定义事件
  3. 使用 ref
  4. EventBus 
  5. $parent 或$root 
  6. attrs 与 listeners
  7. Provide 与 Inject
  8. Vuex

5.为什么data属性是一个函数而不是一个对象

根本原因:每次调用产生一个新的地址空间防止数据被污染

我们对象是引用类型数据,处理的是内存当中的地址。当我们引用data多个组件会对data的地址值进行更改。当我们data是函数的话,则会每次引用的时候都会返回一个新的的地址确保我们的数据不会被更改。


6、vue生命周期分为几个阶段,几个钩子函数,分别写出来

  •  初始化阶段:  beforeCreate、 created
  •  挂载阶段 : beforeMount、mounted
  •  更新阶段 : beforeUpdate、updated
  •  销毁阶段:  beforeDestroy、destroyed

具体关于vue生命周期的详情可移步看:

【vue2】vue生命周期的理解_初映CY的前说-CSDN博客


7、axios的请求方式

实现asios的二次封装http://t.csdn.cn/uFNkn

  • get请求(常用于获取数据)
  • post请求(常用于提交表单数据和上传文件)
  • put请求(对数据进行全部更新)
  • patch请求(修改部分数据)
  • delete请求(常用于删除操作(参数可以放在url上也可以和post一样放在请求体中)

8、说出$nextTick的作用

Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM,但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理,这时候就可以使用 Vue.nextTick(callback)来帮助我们处理更新后的dom数据。


9、如何实现组件缓存

使用<keep-alive>标签,作用是创造一个缓存的空间,用于保存组件状态或者避免重新全部渲染。可以快速调用我们的缓存中的数据,从而达到提高访问速度。那常见的列表与购物车为例子,我们常常在这两个区域之间访问,每次点击不需要每次都重新渲染加载一次。


10.MVVM与MVC的区别是什么

MVC : 传统的设计模式。M:model模型,V:View视图,C:controller控制器

MVVM:我们vue所用的设计模式,数据双向绑定,让数据自动地双向同步不需要操作dom。

  • M: model数据模型 (data里定义)      
  •    V: view视图 (页面标签)
  • VM: ViewModel视图模型 (vue.js源码)

11.Vue常用修饰符有哪些

.prevent: 提交事件不再重载页面;

.stop: 阻止单击事件冒泡;

.once: 只执行一次这个事件

.enter:监听键盘enter键


12.为什么避免v-for和v-if在一起使用

Vue 处理指令时,v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.


13.Vue中Key值作用

key值的作用是给元素添加一个唯一的标识符,提高vue渲染性能。当数据变化的时候,vue就会使用diff算法对比新旧虚拟Dom。 如果遇到相同的key值,则复用元素。如果遇到不同的key值则强制更新。


14.Vue中有时候数组会更新页面,有时候不更新为什么

因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 Vue.set() / vm.$set()

这些方法会触发数组改变, v-for会监测到并更新页面:

  • push()

  • pop()

  • shift()

  • unshift()

  • splice()

  • sort()

  • reverse()

这些方法不会触发v-for更新:

  • slice()

  • filter()

  • concat()


15.计算属性与侦听器的区别

点击跳转两者详解:【vue2】计算属性(computed)与侦听器(watch)详解_

(1)计算属性有缓存机制,侦听器没有

(2)计算属性不支持异步操作, 侦听器支持异步操作

(3)计算属性是一个额外新增的属性, 侦听器只能侦听data中的属性

(4)计算属性有返回值return,侦听器不需要return

(5)计算属性可以监听多个数据变化(计算属性内部用到的数据变化了,就会执行计算属性方法), 侦听器只能侦听一个数据的变化。


16.vue组件传值

父传子

  • 子组件props定义变量
  • 父组件在使用子组件时通过行内属性给props变量传值
  • 特点:单向数据流

子传父

  • 子组件:$emit触发父的事件
  • 父在使用组件用@自定义事件名=父的方法 (子把值带出来)
  • 特点:事件监听

非父子组件:使用vuex


17.vue中解决跨域做法

使用CORS (Cross-Origin Resource Sharing,跨域资源共享)是一个系统,它由一系列传输的HTTP头组成,这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。

所谓同源(即指在同一个域)具有以下三个相同点

  • 协议相同(protocol)
  • 主机相同(host)
  • 端口相同(port)

反之非同源请求,也就是协议、端口、主机其中一项不相同的时候,这时候就会产生跨域。

点击可查看:跨域的解决办法 ---CORS方法、同源策列的理解


18.什么是虚拟 DOM

虚拟DOM给我们带来了跨平台的能力。实际上它是一层对真实BOM的抽象,以js对象(VNode节点)作为基础的树,用对象的属性来描述节点,相当于在 js 和真实 dom 中间加来一个缓存,利用 dom diff 算法避免没有必要的 dom 操作,从而提高性能。最后通过一系列操作使这棵树映射到真实环境上。

vue中一般通过state状态变化来进行编译,底层实现可以理解为三个步骤:

1.用js对象对象结构表述DOM树的结构,根据这个树构建一个真正的DOM树,插到浏览器页面中。

2.当我们状态改变之后,也就是state咋黄太做出修改,vue便会重新构造一棵树的对象树,并且会进行同层对比,记录两棵树之间的差异。

3.把记录的差异再重新应用到所构建的真正的 dom 树,视图就更新了。

它的表达方式就是把每一个标签都转为一个对象,这个对象可以有三个属性:tag(标签)、props、children。


19.diff算法

Diff 算法是一种对比算法。对比两者是 旧虚拟 DOM 和新虚拟 DOM,对比出是哪个 虚拟节点更改了,找出这个 虚拟节点并只更新这个虚拟节点所对应的 真实节点而不用更新其他数据没发生改变的节点,实现 精准地更新真实 DOM,进而 提高效率

在新老虚拟 DOM 对比时:

  • 首先,对比节点本身,判断是否为同一节点,如果不为相同节点,则删除该节点重新创建节点进行替换
  • 如果为相同节点,进行 patchVnode,判断如何对该节点的子节点进行处理,先判断一方有子节点一方没有子节点的情况(如果新的 children 没有子节点,将旧的子节点移除)
  • 比较如果都有子节点,则进行 updateChildren,判断如何对这些新老节点的子节点进行操作(diff 核心)。
  • 匹配时,找到相同的子节点,递归比较子节点

20.slot用法

slot 是插槽,一般在组件内部使用

在封装组件时,在组件内部不确定该位置是以何种形式的元素展示时,,我们可以通过 slot 占据这个位置,该位置的元素需要其他组件以内容形式传递过来.

slot 又分为:默认插槽,具名插槽,作用域插槽(前两者父传子,后者是子传父)


21.vue.use

  • 【是什么】:Vue.use 是用来注册 Vue 插件的一个函数。

  • 【怎么用】:可以传递是一个对象,必须提供 install 方法。也可以传递一个函数,它会被作为 install 方法,install 方法调用时,会将 Vue 作为参数传入。

  • 【注意点】:该方法需要在 new Vue() 之前被调用;当 install 方法被同一个插件多次调用,插件将只会被安装一次。

  • 【场景】:通常用来为 Vue 添加全局功能,例如添加全局方法或 property、添加全局指令、注入组件选项、添加实例方法等。


22.自定义指令的用法

  • 【作用是什么】:可以对普通 DOM 进行底层操作,例如聚焦输入框。

  • 【怎么用】:可以通过 Vue.directive 全局注册一个指令,或者组件内部通过 directives 进行局部注册,它常用的钩子有 inserted,表示被绑定元素插入父节点时调用,还有 update,它表示指令所在组件的 VNode 更新时调用。

  • 【场景】:我在实际项目中,当用户没长传图片时,可以给图片设置一个默认的src属性等。

  •  自定义指令封装:http://t.csdn.cn/9l4nu


23.vue3对比vue2区别

  1. 性能更高了,主要得益于响应式的原理换成了 proxy,VNode diff 的算法进行了优化。

  2. 体积更小了,删除了一些没必要或不常用到的 API,例如 filter、EventBus 等;按需导入,能配合 Webpack 支持 Tree Shaking。

  3. 对 TS 支持更好,因为它本身源码就是用 TS 重写的。

  4. Composition API(组合 API),相比较 Vue2 的 options api,对于开发大型项目更利于代码的复用和维护。

  5. 新特性,例如 Fragment、Teleport、Suspense 等。


24.路由守卫作用/对比axios拦截器

关于路由守卫的细说:http://t.csdn.cn/z5iK6

刚开始接触路由导航守卫你会发现和axios拦截器有点像,实际上它们是两个不同的东西。

1.相同点

(1)都是钩子函数(回调函数的一种,到某个时机了自动触发)

(2)都是起到拦截作用

2.不同点

(1)功能不同 :axios拦截器拦截网络请求, 导航守卫拦截路由跳转

(2)应用场景不同 :

axios拦截器一般用于发送token

导航守卫用于页面跳转权限管理(有的页面可以无条件跳转,例如登录注册页可以无条件跳转。有的页面需要满足条件才能跳转,例如购物车页面就需要用户登录才可以跳转)
 

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

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

相关文章

2月更新 | Visual Studio Code Python

我们很高兴地宣布&#xff0c;2023年2月版 Visual Studio Code Python 和 Jupyter 扩展现已推出&#xff01;此版本包括以下改进&#xff1a;从激活的终端启动 VS Code 时的自动选择环境 使用命令 Python: Create Environmen 时可选择需求文件或可选依赖项 预发布&#xff1a;改…

java八股文--java基础

java基础1.什么是面向对象&#xff0c;谈谈对面向对象的理解2.JDK JRE JVM的区别与联系3.和equals4.hashCode与equals5.String StringBuffer StringBuilder的区别6.重载和重写的区别7.接口和抽象类8.List和Set的区别9.ArrayList和LinkedList10.HashMap和HashTable的区别&#x…

2023.03.12学习总结

项目部分写了内外菜单栏的伸缩&#xff0c;更新了导航栏&#xff0c;新增配置&#xff0c;scss变量 提交记录 学习了scss的使用和配置 &#xff0c;设置了scss全局变量&#xff0c;组件样式 给element-plus配置了主题颜色&#xff0c;配置到了全局 http://t.csdn.cn/FhZYa …

【PyTorch】Pytorch基础第0章

本文参加新星计划人工智能(Pytorch)赛道&#xff1a;https://bbs.csdn.net/topics/613989052 这是目录PyTorch的简介PyTorch 构建深度学习模型的步骤搭建pytorch使用环境PyTorch的简介 PyTorch 是一个开源的机器学习框架&#xff0c;由 Facebook 的人工智能研究院&#xff08;…

面部表情识别2:Pytorch实现表情识别(含表情识别数据集和训练代码)

面部表情识别2&#xff1a;Pytorch实现表情识别(含表情识别数据集和训练代码) 目录 面部表情识别2&#xff1a;Pytorch实现表情识别(含表情识别数据集和训练代码) 1.面部表情识别方法 2.面部表情识别数据集 &#xff08;1&#xff09;表情识别数据集说明 &#xff08;2&…

蔬菜视觉分拣机器人的设计与实现(RoboWork参赛方案)

蔬菜视觉分拣机器人的设计与实现 文章目录蔬菜视觉分拣机器人的设计与实现1. 技术栈背景2. 整体设计3. 机械结构3.1 整体结构3.2 底座结构3.3 小臂结构3.4 大臂结构3.5 负载组件结构3.6 末端执行器结构4. 硬件部分4.1 视觉系统4.1.1 光源4.1.2 海康工业相机4.2 传送带系统4.2.1…

网络工程师必备知识点

作为网络工程师&#xff0c;您将负责设计、部署和维护计算机网络系统。这包括构建、配置和管理网络设备&#xff0c;如交换机、路由器、防火墙等&#xff0c;并确保网络系统能够高效地运行。您需要了解计算机网络的各个层次、协议、标准和技术&#xff0c;包括TCP/IP、DNS、HTT…

现在的00后,实在是太卷了

现在的小年轻真的卷得过分了。前段时间我们公司来了个00年的&#xff0c;工作没两年&#xff0c;跳槽到我们公司起薪18K&#xff0c;都快接近我了。后来才知道人家是个卷王&#xff0c;从早干到晚就差搬张床到工位睡觉了。 最近和他聊了一次天&#xff0c;原来这位小老弟家里条…

CPU平均负载高问题定位分析

一、Linux操作系统CPU平均负载 1.1什么是CPU平均负载 1.2 怎么查看平均负载数值 二、Linux操作系统CPU使用率和平均负载区别 CPU使用率和平均负载区别 三、阿里云Linux操作系统CPU压测环境准备 3.1 核心命令应用场景 3.2 模拟生产环境出现的多种问题环境准备 分析工具安…

我,30岁程序员被裁了,千万别干全栈

大家好&#xff0c;这里是程序员晚枫&#xff0c;今天是读者投稿。下面开始我们的正文。&#x1f447; 关注博主&#x1f449;程序员晚枫 很久了&#xff0c;今天给大家分享一下我从事程序员后&#xff0c;30岁被裁的经历&#xff0c;希望帮到有需要的人。 1、我被裁了 大家好…

某小公司面试记录

记录一次面试过程&#xff0c;还有一些笔试题&#xff0c;挺简单的&#xff0c;排序&#xff0c;去重&#xff0c;this指向&#xff0c;深浅拷贝&#xff0c;微任务的执行顺序&#xff0c;变量提升等。 ES6数组新增的方法 Array.from&#xff1a; 将两类对象转为真正的数组&am…

2月编程语言排行榜新鲜出炉,谁又摘得桂冠?

近日&#xff0c;TIOBE公布了2023年2月编程语言排行榜&#xff0c;本月各个语言表现如何&#xff1f;谁又摘得桂冠&#xff1f;一起来看看吧&#xff01; TIOBE 2月Top15编程语言&#xff1a; 详细榜单查看TIOBE官网 https://www.tiobe.com/tiobe-index/ 关注IT行业的小伙伴…

【Linux】冯.诺依曼体系结构与操作系统

环境&#xff1a;centos7.6&#xff0c;腾讯云服务器Linux文章都放在了专栏&#xff1a;【Linux】欢迎支持订阅&#x1f339;冯.诺依曼体系结构什么是冯诺依曼体系结构&#xff1f;我们如今的计算机比如笔记本&#xff0c;或者是服务器&#xff0c;基本上都遵循冯诺依曼体系结构…

基于HTML实现浪漫情人节表白代码(附源代码)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

Java每日一练(20230312)

目录 1. 两数之和 II ★ 2. 反转链表 ★★ 3. 二叉树的层序遍历 II ★★★ &#x1f31f; 每日一练刷题专栏 C/C 每日一练 ​专栏 Python 每日一练 专栏 Java 每日一练 专栏 1. 两数之和 II 给定一个已按照 非递减顺序排列 的整数数组 numbers &#xff0c;请你从数…

YOLOv7、YOLOv5改进之打印热力图可视化:适用于自定义模型,丰富实验数据

💡该教程为改进YOLO高阶指南,属于《芒果书》📚系列,包含大量的原创改进方式🚀 💡更多改进内容📚可以点击查看:YOLOv5改进、YOLOv7改进、YOLOv8改进、YOLOX改进原创目录 | 唐宇迪老师联袂推荐🏆 💡🚀🚀🚀内含改进源代码 按步骤操作运行改进后的代码即可�…

Python每日一练(20230309)

目录 1. 删除有序数组中的重复项 ★ 2. 二叉树的最小深度 ★★ 3. 只出现一次的数字 II ★★ &#x1f31f; 每日一练刷题专栏 C/C 每日一练 ​专栏 Python 每日一练 专栏 1. 删除有序数组中的重复项 给你一个有序数组 nums &#xff0c;请你原地删除重复出现的元素…

裸辞两个月还能不能找到工作?亲身经历告诉你结果·····

这是我在某论坛看到的一名网友的吐槽&#xff1a; 软件测试四年&#xff0c;主要是手动测试&#xff08;部分自动化测试和性能测试&#xff0c;但是用的是公司内部自动化工具&#xff0c;而且我自动化方面是弱项。&#xff09;现在裸辞两个月了&#xff0c;面试机会少而且面试…

总结:电容在电路35个基本常识

1 电压源正负端接了一个电容&#xff0c;与电路并联&#xff0c;用于整流电路时&#xff0c;具有很好的滤波作用&#xff0c;当电压交变时&#xff0c;由于电容的充电作用&#xff0c;两端的电压不能突变&#xff0c;就保证了电压的平稳。 当用于电池电源时&#xff0c;具有交流…

自学前端,你必须要掌握的3种定时任务

当你看到这篇博客的时候&#xff0c;一定会和狗哥结下不解之缘&#xff0c;因为狗哥的博客里不仅仅有代码&#xff0c;还有很多代码之外的东西&#xff0c;如果你可以看到最底部&#xff0c;看到投票环节&#xff0c;我相信你一定感觉到了&#xff0c;狗哥的真诚&#xff0c;狗…
最新文章