2022最新的前端面试题总结(vue)

最新推荐文章于 2024-07-30 15:24:39 发布

前端人，前端魂

最新推荐文章于 2024-07-30 15:24:39 发布

阅读量1.9k

点赞数 3

分类专栏：前端面试题文章标签： vue.js 前端面试

本文链接：https://blog.csdn.net/weixin_46468143/article/details/124315221

版权

前端面试题专栏收录该内容

2 篇文章 3 订阅

订阅专栏

想必现在的金三银四已经变成了铜三铁四了，很多人不知道怎么准备面试题，我给大家准备了vue的几道高频面试题有需要的可以看一下

一、最常见的就是说一下vue的生命周期

生命周期这个是最常考的面试官一上来就会问你说一下生命周期
beforeCreate 在实例初始化之后，当前阶段data、methods、computed 和watch上的数据和方法都是不可以被访问的

create 实例创建完成之后，在这里已经有了数据(data)，这里没有el,无法和DOM交互，可以通过$nextTick来访问DOM

beforeMoundt 在挂载之前被调用：相关的 render函数首次被调用

mounted 挂载完成之后触发，这个阶段可以访问到真实的DOM，数据也完成了双向绑定

beforeUpdate 数据更新时调用，发生在虚拟DOM重新渲染之前

updated 数据更新完成之后，避免在这里更新数据，可能导致无限循环更新

beforeDestroy 实例销毁之前调用。这里主要是清除一下定时器

destroyed vue实列销毁后调用

下面两个是加入了 keep-alive 专属的

activated 组件被激活时调用

deactivated 组件被销毁时调用

当你回答了之后面试官可能会追问你什么时候可以发起异步请求？
可以在created、beforeMount、mounted 中进行异步请求，因为这三个生命周期中，data函数已经创建了，可以将服务端返回的数据进行赋值
如果异步请求不需要依赖DOM推荐在create中发起因为他能比较快的获取到服务器的数据，减少页面的loading时间

二、vue的组件通讯有哪些？

父传子通过props
子传父通过 $emit自定义事件
eventBus 事件总线 $emit / $on）这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。
$attrs
ref获取到组件的实列
$parent,$children 获取当前组件的父组件和当前组件的子组件

三、v-if和v-show的区别

他们都能控制节点的显示和隐藏
v-if是对DOM元素的添加和删除而 v-sho是一开始就创建了DOM然后通过display:none/block来显示隐藏
如果是频繁操作的话我们使用v-show 性能好一点

四、为什么data是一个函数，而不是一个对象呢？

因为组件是复用的如果是写成对象那么所有实例共用一份data,就会造成一个修改全部修改的结果，如果是函数的话，返回一个新的data，每个组件维护各自的data就行了

五、vue的内置指令有哪些？

v-once v-bind v-on v-html v-text v-model v-for v-if/else/ v-show -vfor 等等

六、computed和watch的区别和使用场景

computed:计算属性，依赖其他计算值，并且值是有缓存的，只有当计算值变化之后才会返回新的内容。

watch:监听属性，监听某些数据的回调

使用场景：如果是对数字的计算，并且依赖其他数据的时候就使用component
如果是对数字的计算，并且依赖其他数据的时候就使用component

7、v-if和v-for为什么不能同时使用？

第一因为v-for的优先级比v-if高那么我们渲染的时候同时还要解析v-if 那么性能消耗是比较大的，我们可以先用计算属性把不需要的值过滤掉

8、v-for为什么要加key值？

key值是vnode唯一的一个标识，通过这个key我们的diff操作可以更快速更准确，因为我们能够识别这个元素是不是之前的元素，如果是就复用不是就重新创建

9、v-model的原理

这个其实是语法糖他主要是绑定了value值和输入事件，当我们输入的时候去修改对应的value

10、vue事件绑定的原理

基于发布订阅模式来完成的维护一个事件中心 on的时候将事件名称存在事件中心里，称之为订阅者，emit将对应的事件进行触发，去执行事件中心的监听器
大概写一下发布订阅的代码吧

// 定义一个eventBus
class eventBus {
	
	// 定义一个存放全部事件的对象
	constructor()={
		events = {}
	}
	// on事件 会传一个事件名和回调函数
	on(eventName,cb){
		//先判断有没有这个事件名 有的话就push 没有就创建一个新的
		if(!this.events[eventName]){
			this.events[eventName] = []
		}
		this.events[eventName].push = cb
	}
	// emit 传入触发的事件名和参数
	emit(eventName,...args){
	this.events[eventName].forEach(cb=>{cb(...args)})
	}

}

 var eventBus = new EventBus()
        // 监听事件
        eventBus.on('click', (data) => { console.log("click1", data) })
        eventBus.o / n('click', (data) => { console.log("click2", data) })
        let cb3 = (data) => {
            console.log("click2", data)
        }
        eventBus.on('click', cb3)

        // 触发事件
        eventBus.emit('click', { msg: '这是触发时候传递得数据' })

11、vue2的响应式数据原理

使用 Object.defineProperty 来进行对所有数据的劫持，然后给他们添加上get和set的方法，当属性变化之后去通知对应的watcher来更新(派发更新)

12、vue3有了解吗？

用proxy代替了 vue2的 Object.defineProperty 因为Object.defineProperty无法对对象和数组监听
使用Composition API setup
多个根节点等等

13、Vue 的父子组件生命周期钩子函数执行顺序

加载过程
父 beforeCreate->父 created->父 beforeMount->子 beforeCreate->子 created->子 beforeMount->子 mounted->父 mounted
子组件更新过程
父 beforeUpdate->子 beforeUpdate->子 updated->父 updated
父组件更新过程
父 beforeUpdate->父 updated

14、虚拟 DOM 是什么有什么优缺点？

我们先来说一下什么是虚拟DOM
虚拟DOM就是用js对象来模拟真实DOM，对真实DOM的一个抽象
优点：不需要我们直接操作DOM ，保证了性能的下限
缺点：无法极致的优化，如果是大量的DOM 他的速度是没有直接插入innerHTML快的

15、路由的钩子函数

什么是路由钩子函数？
我们在路由进入到离开每个时间点都会触发不同的函数这些函数就是钩子函数
全局的定义一个可以在全局调用
路由的当path匹配的时候触发
组件的只有当前组件可以使用

16、能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗？

hash模式的实现原理
早期的前端路由的实现就是基于 location.hash来实现的
● URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；
● hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；
● 可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；
● 我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。
history模式的实现原理
● pushState 和 repalceState 两个 API 来操作实现 URL 的变化；
● 我们可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）；
● history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）。

17、你有对 Vue 项目进行哪些优化？

（1）代码层面的优化
● v-if 和 v-show 区分使用场景
● computed 和 watch 区分使用场景
● v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
● 长列表性能优化
● 事件的销毁
● 图片资源懒加载
● 路由懒加载
● 第三方插件的按需引入
● 优化无限列表性能
● 服务端渲染 SSR or 预渲染
（2）Webpack 层面的优化
● Webpack 对图片进行压缩
● 减少 ES6 转为 ES5 的冗余代码
● 提取公共代码
● 模板预编译
● 提取组件的 CSS
● 优化 SourceMap
● 构建结果输出分析
● Vue 项目的编译优化
（3）基础的 Web 技术的优化
● 开启 gzip 压缩
● 浏览器缓存
● CDN 的使用
● 使用 Chrome Performance 查找性能瓶颈