背负青天而莫之夭阏者,而后乃今将图南。
百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 互联网 > 面试题 > 正文

Vue 前端面试题

swdejp 2023-10-21 100 浏览 0 评论

前端开发

前言

前几天整理了一些 html + css + JavaScript 常见的面试题(https://segmentfault.com/u/youdangde_5c8b208a23f95/articles),然后现在也是找了一些在 Vue 方面经常出现的面试题,留给自己查看消化,也分享给有需要的小伙伴。

如果文章中有出现纰漏、错误之处,还请看到的小伙伴留言指正,先行谢过。

以下 ↓

1. 说一下 Vue 的双向绑定数据的原理

vue 实现数据双向绑定主要是:采用数据劫持结合“发布者 - 订阅者”模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter、 getter,在数据变动时发布消息给订阅者,触发相应监听回调。

2. 解释单向数据流和双向数据绑定

单向数据流: 顾名思义,数据流是单向的。数据流动方向可以跟踪,流动单一,追查问题的时候可以更快捷。缺点就是写起来不太方便。要使 UI 发生变更就必须创建各种 action 来维护对应的 state。

双向数据绑定:数据之间是相通的,将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下,会简化大量与业务无关的代码。缺点就是无法追踪局部状态的变化,增加了出错时 debug 的难度。

3. Vue 如何去除 URL 中的

vue-router 默认使用 hash 模式,所以在路由加载的时候,项目中的 URL 会自带 “#”。如果不想使用 “#”, 可以使用 vue-router 的另一种模式 history:

new
 
Router
({
 mode: 
'history'
,
 routes: [ ]
})

需要注意的是,当我们启用 history 模式的时候,由于我们的项目是一个单页面应用,所以在路由跳转的时候,就会出现访问不到静态资源而出现 “404” 的情况,这时候就需要服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 “index.html” 页面。

4. 对 MVC、MVVM 的理解

MVC

Vue 前端面试题


特点:

  1. View 传送指令到 Controller;

  2. Controller 完成业务逻辑后,要求 Model 改变状态;

  3. Model 将新的数据发送到 View,用户得到反馈。

所有通信都是单向的。

MVVM

Vue 前端面试题


特点:

  1. 各部分之间的通信,都是双向的;

  2. 采用双向绑定: View 的变动,自动反映在 ViewModel,反之亦然。

5. Vue 生命周期的理解

Vue 实例有一个完整的生命周期,生命周期也就是指一个实例从开始创建到销毁的这个过程。

  • beforeCreated():在实例创建之间执行,数据未加载状态。

  • created():在实例创建、数据加载后,能初始化数据,DOM 渲染之前执行。

  • beforeMount():虚拟 DOM 已创建完成,在数据渲染前最后一次更改数据。

  • mounted():页面、数据渲染完成,真实 DOM 挂载完成。

  • beforeUpadate():重新渲染之前触发。

  • updated():数据已经更改完成,DOM 也重新 render 完成,更改数据会陷入死循环。

  • beforeDestory() 和 destoryed():前者是销毁前执行(实例仍然完全可用),后者则是销毁后执行。

6. 组件通信

父组件向子组件通信

子组件通过 props 属性,绑定父组件数据,实现双方通信。

子组件向父组件通信

将父组件的事件在子组件中通过 $emit 触发。

非父子组件、兄弟组件之间的数据传递

/*新建一个Vue实例作为中央事件总嫌*/
let event = 
new
 
Vue
();
/*监听事件*/
event.$on(
'eventName'
, (val) => {
 
//......do something
});
/*触发事件*/
event.$emit(
'eventName'
, 
'this is a message.'
)

7. vue-router 路由实现

路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能。

8. v-if 和 v-show 区别

使用 v-if 的时候,如果值为 false ,那么页面将不会有这个 html 标签生成。

v-show 则是不管值为 true 还是 false , html 元素都会存在,只是 CSS 中的 display显示或隐藏。

9. $route 和 $router 的区别

$router 为 VueRouter 实例,想要导航到不同 URL,则使用 $router.push 方法。

$route 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等。

10. NextTick 是做什么的

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM。

具体可参考官方文档:深入响应式原理(https://cn.vuejs.org/v2/guide/reactivity.html)。

11. Vue 组件 data 为什么必须是函数

因为 JS 本身的特性带来的,如果 data 是一个对象,那么由于对象本身属于引用类型,当我们修改其中的一个属性时,会影响到所有 Vue 实例的数据。如果将 data 作为一个函数返回一个对象,那么每一个实例的 data 属性都是独立的,不会相互影响了。

12. 计算属性 computed 和事件 methods 有什么区别

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果,两种方式是相同的。

不同点:

  • computed:计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值。

  • method:只要发生重新渲染, method 调用总会执行该函数。

13. 对比 jQuery ,Vue 有什么不同

jQuery 专注视图层,通过操作 DOM 去实现页面的一些逻辑渲染; Vue 专注于数据层,通过数据的双向绑定,最终表现在 DOM 层面,减少了 DOM 操作。

Vue 使用了组件化思想,使得项目子集职责清晰,提高了开发效率,方便重复利用,便于协同开发。

16. Vue 中怎么自定义指令

全局注册

// 注册一个全局自定义指令 `v-focus`
Vue
.directive(
'focus'
, {
 
// 当被绑定的元素插入到 DOM 中时……
 inserted: 
function
 (el) {
 
// 聚焦元素
 el.focus()
 }
})

局部注册

directives: {
 focus: {
 
// 指令的定义
 inserted: 
function
 (el) {
 el.focus()
 }
 }
}

参考官方文档:自定义指令(https://cn.vuejs.org/v2/guide/custom-directive.html)。

15. Vue 中怎么自定义过滤器

可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数。过滤器函数以值为参数,返回转换后的值。

Vue
.filter(
'reverse'
, 
function
 (value) {
 
return
 value.split(
''
).reverse().join(
''
)
})
<!-- 'abc' => 'cba' -->
<span
 
v-text
=
"message | reverse"
></span>

过滤器也同样接受全局注册和局部注册。

16. 对 keep-alive 的了解

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

<keep-alive>
 
<component>
 
<!-- 该组件将被缓存! -->
 
</component>
</keep-alive>

可以使用 API 提供的 props,实现组件的动态缓存。

具体参考官方API(https://cn.vuejs.org/v2/api/#keep-alive)。

17. Vue 中 key 的作用

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

具体参考官方API(https://cn.vuejs.org/v2/api/#key)。

18. Vue 的核心是什么

数据驱动、组件系统。

19. Vue 等单页面应用的优缺点

优点

  • 良好的交互体验

  • 良好的前后端工作分离模式

  • 减轻服务器压力

缺点

  • SEO 难度较高

  • 前进、后退管理

  • 初次加载耗时多

相关推荐

Vue 前端面试题
Vue 前端面试题

前端开发前言前几天整理了一些html+css+JavaScript常见的面试题(https://segmentfault.com/u/youdang...

7个月前 (10-21) swdejp

58 道 Vue 常见面试题集锦,涵盖入门到精通,自测 Vue 掌握程度

1.vue优点?答:轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;简单易学:国人开发,中文文档,不存在语言障碍,易于理解和学习;双向数据绑定:保留了angular的特...

Web前端工程师面试之Vue问题汇总解析
Web前端工程师面试之Vue问题汇总解析

又是一年毕业季,很多学习前端的同学面对激烈的求职竞争倍感压力,想要了解企业招聘会提问哪些问题。今天千锋郑州Web前端培训小编就给大家分享一下高级Web前端工程师...

7个月前 (10-21) swdejp

60个Vue常见问题汇总及解决方案

Q1:安装超时(installtimeout)方案有这么些:cnpm : 国内对npm的镜像版本/*cnpm website: https:/...

前端面试题《Vue》

1.vue优点?轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb;简单易学:国人开发,中文文档,不存在语言障碍,易于理解和学习;双向数据绑定:保留了angular的特点,...

吊打面试官系列-58道vue面试题

1.vue优点?2.vue父组件向子组件传递数据?3.子组件像父组件传递事件?4.v-show和v-if指令的共同点和不同点?5.如何让CSS只在当前组件中起作用?6.的作用是什么?7.如何获...

前端来自真实大厂的532道面试题

前言面试题是来自微博@牛客网发布的真实大厂前端面经题目,我一直在收集题目长期一个一个的记录下来的,可能会有重复,但基本前端的面试大纲和需要掌握的知识都在其中了,面试题仅做学习参考,学习者阅后也要用心钻...

60个前端框架Vue常见问题汇总及解决方案

  Q1:安装超时(installtimeout)  方案有这么些:  cnpm:国内对npm的镜像版本  /*  cnpmwebsite:https://npm.taobao.org/  ...

前端面试题(十四)

项目开发1.项目开发中,目录机构是怎么设计的https://go.zbj.com/news/13471.html2.曾经用过哪些开发工具https://www.jianshu.com/p/af24...

前端 JS 笔试百题

单选题JS基础js概念与类型检测以下不属于typeof运算符返回值的是?A. "string"B. "function"C.&n...

java面试之JVM篇第五问--谈谈对 OOM 的认识?如何排查 OOM 问题?

除了程序计数器,其他内存区域都有OOM的风险。栈一般经常会发生StackOverflowError,比如32位的windows系统单进程限制2G内存,无限创建线程就会发生栈的OOM...

Java筑基(Tomcat+Mysql+设计模式+并发+Netty+JVM)

1.Java筑基(Tomcat+Mysql+设计模式+并发+Netty+JVM)以JVM面试题为例:Java类加载过程?描述一下JVM加载Class文件的原理机制?Java内存分配GC是什么...

深入浅出!2020年春招+秋招JVM面试题整理(附答案)

运行时数据区是什么?虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干不同的数据区,这些区域有各自的用途、创建和销毁时间。线程私有:程序计数器、Java虚拟机栈、本地方法栈。线程共享:...

如何备战JVM调优面试?

面试痛点一些常见理论,如JVM内存模型,垃圾回收算法,垃圾回收器,类加载都背滚瓜烂熟。但面试官问:你平时在工作中如何进行JVM优化?很多人直接懵逼了,大部分工程师对JVM的掌握仅仅停留在JVM的一些理...

「Android大厂必问面试题」有三个线程时如何确保按顺序执行?

题目:有三个线程T1,T2,T3,怎么确保它们按顺序执行?这道题想考察什么?是否了解多个线程顺序启动的方式有哪些与真实场景使用,是否熟悉多个线程顺序启动在工作中的表现是什么?考察的知识点多个线程顺序启...

取消回复欢迎 发表评论: