Vue高频面试题（内附答案）

六便士，

已于 2022-10-28 15:37:55 修改

阅读量559

点赞数 4

文章标签： vue.js 前端 javascript

于 2022-10-28 14:29:07 首次发布

本文链接：https://blog.csdn.net/pidanl/article/details/127570994

版权

1.Vue中key值作用

1.vue在渲染的时候,会先把新DOM 与旧DOM 进行对比，如果dom结构一致，则vue会复用旧的dom。（此时可能造成数据渲染异常）
2.使用key可以给dom添加一个唯一标识符，让vue强制更新dom

2.vue组件传值

父传子

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

子传父

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

非父子组件

vuex EventBus(了解就行）

3.【必问】vue生命周期总共分为几个阶段？

核心：四个阶段8个钩子函数

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

1**）beforeCreate**

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2**）created**

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

3**）beforeMount**

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

4**）mounted**

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

5**）beforeUpdate**

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

6**）updated**

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

7**）activated**

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

8**）deactivated**

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

9**）beforeDestroy**

实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

10**）destroyed**

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

11**）errorCaptured（2.5.0+ 新增）**

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

4.【必问】第一次加载页面会触发哪几个钩子函数？

四个钩子
- beforeCreate,
- created,
- beforeMount,
- mounted 这几个钩子函数

5.【必问】Vue的路由实现模式：hash模式和history模式

1.路径不同
hash有#, history没有#
2.工作模式不同
hash : 修改当前页面hash,不需要服务器额外配置
history: 会给服务器发送请求，需要服务器配置

1.hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
2.history模式：history采用HTML5的新特性；且提供了两个新方法： pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

6.【必问】请说出路由配置项常用的属性及作用

路由配置参数：
- path : 跳转路径
- component : 路径相对于的组件
- name:命名路由
- children:子路由的配置参数(路由嵌套)
- props:路由解耦
- redirect : 重定向路由

7.【必问】说一下你在vue中踩过的坑

1操作data中的数据，发现没有响应式
- 原因：数组中有很多方法，有的会改变数组（例如pop push）,有的不会改变数组（例如slice, filter）
- 解决方案：通过Vue.set(对象，属性，值)这种方式就可以达到，对象新添加的属性是响应式的
2.在created操作dom的时候，是报错的，获取不到dom，这个时候实例vue实例没有挂载
- 解决方案：Vue.nextTick(回调函数进行获取
3.其他的可以自由发挥，只要不是太低级就可以（比如，单词写错，代码位置写错，这种就是低级问题。其他的都可以说，千万别说这两个)

【加分】Vue 的 nextTick 的原理是什么?

1为什么需要 nextTick
- Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。
2.知识储备（可以不说，但是自己要知道，以防不测）
- 事件循环中宏任务和微任务这两个概念
- 常见的宏任务有 script, setTimeout, setInterval, setImmediate（一种执行更加频繁的定时器）
- 常见的微任务有 ,Promise.then(), async
3.最终答案：
- nextTick 的原理是 vue 通过异步队列控制 DOM 更新
- nextTick底层是promise，所以是微任务。这个一定要知道
- （官方语言) ： nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。
4.小科普：其实vue在版本更新的时候。时而将nextTick封装成宏任务，时而将nextTick封装成微任务。不过目前vue2最新的版本，nextTick底层是微任务
- 课外阅读nextTick源码：https://juejin.cn/post/6875492931726376974