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

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

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


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

1、Vue是什么?

Vue.js是一个构建数据驱动的Web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合,当与单文件组件和Vue生态系统支持的库结合使用时,Vue也完全能够为复杂的单页应用程序提供驱动。

2、Vue的双向绑定数据的原理

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

3、Vue如何去除URL中的#

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

new Router({

mode: 'history', routes: [ ]

})

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

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


4、Vue生命周期的理解

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

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

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

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

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

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

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

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

5、说一说单向数据流和双向数据绑定的优缺点

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

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

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


6、vue-router路由实现

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

7、v-if和v-show区别

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

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

8、$route和$router的区别

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

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

9、Vue组件data为什么必须是函数

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

10、jQuery、Vue有什么不同

jQuery专注视图层,通过操作DOM去实现页面的一些逻辑渲染;Vue专注于数据层,通过数据的双向绑定,最终表现在DOM层面,减少了DOM操作。Vue使用了组件化思想,使得项目子集职责清晰,提高了开发效率,方便重复利用,便于协同开发。


相关推荐

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,怎么确保它们按顺序执行?这道题想考察什么?是否了解多个线程顺序启动的方式有哪些与真实场景使用,是否熟悉多个线程顺序启动在工作中的表现是什么?考察的知识点多个线程顺序启...

取消回复欢迎 发表评论: