前端常见Vue2.0面试题

简介: vue3.0出来后,还有部分项目是用2.0开发。所以将曾经旧的阿里云博客迁移了过来。

今天我们来说说常见的vue面试题,其实这个技术已经出现了几年时间,每个城市的问法也都八九不离十,因为vue也就那么些技术,问不出什么太新鲜的东西。目前vue3.0兴起,可能会有一些面试官顶多问下与2.0的区别,那么今天我们就简单说说关于vue的一些面试题。

其实博主自己也是不爱背题,在面试前从来不怎么看题,一般都是用到的东西说一说。但事实上面试官就看你回答得怎么样,很少有面试官真正能感觉出你到底是不是背的,所以博主在这方面就很吃亏,先说一下经常被问到的知识,简单些,回答上你们可以更好。我给你们学一下大部分的面试官:
️注意:本人简历中有本人博客链接,若面试官看到此篇文章就当作没看见就可以了。自己头脑不好使,这些都是随笔记录,写完也经常记不住的

--- 开始:

0、vue用了多久了?说一下自己所做的项目情况。
根据自己的情况说。

1、vue中的通信都有哪些?
父子通信,兄弟通信,vuex。

2、嗯,那你说说父子通信都怎么传值的?
父传子用props接收参数进行传值,在子组件中定义一个props,来接受父组件传过来的值,并在子组件中使用。

3、那如果想传参严谨一些怎么实现呢?比如只接受某些类型的参数?
我们在props中可以定义参数的类型,比如我就固定接收一个数字类型,我可以定一个变量为num,设置一些类型。

props:{
  num:Number
}

4、嗯,那子传父呢?
子传父,用一个回调函数,通过this.$emit()的方法。它有两个参数,第一个是父组件中监听的方法名,第二个是方法。父组件监听这个方法名即可。

5、嗯,那还有没有其他方法可以实现的呢?
vue中新增了两个新增事件,一个是v-bind="$attrs",一个是v-on='$listeners'。当我们在创建一些组建的时候,这两个事件可以帮助我们监听到子组件的改变,从而实现了父组件的变化。

6、那这两个方法分别是什么用途呢?
v-bind="$attrs" 它包含了父作用域中不作为 prop 被识别的特性绑定;
v-on='$listeners' 它包含了父作用域中的事件监听器,可以触发父组件中的事件。

7、好,那你介绍一下vueX吧,说说其中都有什么。
vueX是处理复杂的父子通信时,需要用到的技术。
state中可以定义一些常量,getters中写触发state改变的方法,通常用到getters比较少。
还有两个可以存放方法的地方是actions和mutations,一个是异步,一个是同步,我们一般都用mutations存放一些方法,在页面中通过this.$store.commit()方法来触发mutations,从而改变state中的值。
复习vuex可以点击这里

8、自己怎么封装一个组件?(或者问如果页面有相同的功能块怎么办?)
很简单啊,在components文件夹中创建一个 .vue 组件,我们标准命名首字母大写。写上公用的组件和样式,内部的值都用动态绑定。并且创建props接收方法即可。不过现在的UI库也都特别多,我们一般都直接使用UI库就可以了,简单还方便,有不同的地方,简单封装一下就可以了。

9、你们路由都怎么封装的?
我们都是使用公司给的框架,vue-cli在创建路由时,会直接引入路由组件的,我们只需要在 views 文件夹下创建自己的页面,在路由 path 中定义页面路径;写个 name 名称;在 component 中可以用个箭头函数写上页面的路径即可。并且我们一般会定义一个重定向 redirect 到一个指定页。

10、那你们环境都怎么配置的?
(虽然说公司都是配置好的,不过也要简单的说说,点此跳转vue框架配置
目前我们用的都是vue-cli3.0的配置,下载完框架后,自建 vue.config.js 文件,其中可以引入node中的 path 来打包一些样式文件等,是他们压缩到一个盘下。vue-cli3.0提供了一个 publicPath属性,之前2.0叫 baseURL。在这我们可以进行测试环境或上线环境的配置,可以通过 process.env.NODE_ENV === 'production' ? '/自己项目的路径path/' : '/' 进行三目判断,我们还可以配置各种 loader ,以及配置 proxy 来解决跨域请求。

11、嗯,那你再说一下vue中常用的生命周期有哪些,分别是干什么的
常用的有8个(生命周期不仅仅是8个),都是成对出现。分别是:
beforeCreate阶段、created阶段;
beforeMount阶段、mounted阶段;
beforeUpdate阶段、updated阶段;
beforeDestroy阶段、destroyed阶段;
分别为:创建前/后,载入前/后,更新前/后,销毁前/后。

12、那实例是在哪个阶段创建完的?
在mounted阶段实例创建完成。

13、实例初始化是在哪个阶段?
在created阶段实例初始化,但还未完成。

14、有没有了解过vue的实现原理?
vue采用的是数据劫持,结合发布者和订阅者模式,通过 Object.defineProperty() ,来对于每个属性的 gettersetter进行劫持,在数据更改时,发布消息给到订阅者,重新渲染页面。
(具体的步骤有兴趣的可以去看源码)

15、知不知道hash和history两种模式?简单说说:
直观上的区别就是差一个“#”,hash中的地址是写在“#”后边的;但history没有。
要是使用hash模式,hash之前的内容会包含在请求中;history模式URL就要和后端进行一致,所以要改为history也需要后端的配合,否则会报错。
所以hash模式在每次刷新页面时是直接更改“#”后的东西,history每次刷新会重新像后端请求整个网址,也就是重新请求服务器。如果后端没有及时响应,就会报错404!。history的好处是可以进行修改历史记录,并且不会立刻像后端发起请求。不过如果对于项目没有硬性标准要求,我们可以直接使用hash模式开发。

16、在开发时,有没有遇到过什么问题印象深刻?
(按照自己的情况说。)

17、好的,准备入职

文章写到这里,希望大家可以有所收获!

weChat:VillinWeChat

目录
相关文章
|
18天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
40 5
|
1月前
|
JavaScript 前端开发
vue前端下载,实现点击按钮弹出本地窗口,选择自定义保存路径
这个不用代码实现(网上也找不到方法可以调出另存为窗口),更改浏览器设置就可以,否则,现在的浏览器都是默认直接保存到下载路径中
61 3
|
21天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
86 0
|
1天前
|
缓存 安全 JavaScript
前端安全:Vue应用中防范XSS和CSRF攻击
【4月更文挑战第23天】本文探讨了在Vue应用中防范XSS和CSRF攻击的重要性。XSS攻击通过注入恶意脚本威胁用户数据,而CSRF则利用用户身份发起非授权请求。防范措施包括:对输入内容转义、使用CSP、选择安全的库;采用Anti-CSRF令牌、同源策略和POST请求对抗CSRF;并实施代码审查、更新依赖及教育团队成员。通过这些实践,可提升Vue应用的安全性,抵御潜在攻击。
|
4天前
|
NoSQL JavaScript 前端开发
报错场景:ant design vue前端登录时,输入的验证码是对的,但是一直提上验证码错误,登录不进去 报错信息(Error in execution; nested exception)
报错场景:ant design vue前端登录时,输入的验证码是对的,但是一直提上验证码错误,登录不进去 报错信息(Error in execution; nested exception)
18 0
|
13天前
|
JavaScript 前端开发 API
游戏开发入门:Python后端与Vue前端的协同工作方式
【4月更文挑战第11天】使用Python后端(Flask或Django)和Vue.js前端开发游戏变得流行,能提高开发效率和可维护性。本文指导如何构建这样的项目,包括设置环境、创建虚拟环境、搭建后端API及前端Vue组件,强调前后端协作和API接口的重要性。这种架构促进团队合作,提升代码质量和游戏体验。
|
14天前
|
供应链 JavaScript 前端开发
使用Django和Vue实现电子商务网站的后端和前端
【4月更文挑战第10天】本文介绍了使用Django和Vue构建电子商务网站的后端与前端方法。Django作为Python的Web框架负责后端,其模型-视图-控制器设计简化了商品管理、购物车和订单处理。Vue.js用于前端,提供数据驱动和组件化的用户界面。通过定义Django模型和视图处理请求,结合Vue组件展示商品和管理购物车,开发者可构建交互性强的电商网站。虽然实际开发涉及更多细节,但本文为入门提供了基础指导。
|
1月前
|
前端开发 JavaScript Java
springboot+vue实现用户统一认证、管理-前端实现
springboot+vue实现用户统一认证、管理-前端实现
25 0
|
1月前
|
JavaScript 前端开发 API
vue面试题目汇总
vue面试题目汇总
33 4
|
1月前
|
存储 缓存 监控
2024年春招小红书前端实习面试题分享
春招已经拉开帷幕啦! 春招的拉开,意味着新一轮的求职大战已经打响,希望每位求职者都能充分准备,以最佳的状态迎接挑战,找到心仪的工作,开启职业生涯的新篇章。祝愿每位求职者都能收获满满,前程似锦!
71 3