最新整理的Vue面试题 （一） 细+答案

Vue面试题

经过了搜索整合，翻了翻最近的面试题，进行了部分知识点的总结，因题目过多就分了两篇：
第二篇：https://blog.csdn.net/g1437353759/article/details/109251095

1.什么是 vue 生命周期，作用是什么

​ 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我们最早可在mounted 中进行。

2.第一次页面加载会触发哪几个钩子

beforeCreate， created， beforeMount， mounted

3.简述每个周期具体适合哪些场景

1、beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
2、created：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
3、beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
4、mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
5、beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
6、updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
7、beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
8、destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。

4.created和mounted的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

5.vue获取数据在哪个周期函数

一般 created/beforeMount/mounted 皆可.
比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.

6.vue-router 是什么?它有哪些组件

vue用来写路由一个插件。router-link、router-view

7.active-class 是哪个组件的属性？

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换；

8.怎么定义 vue-router 的动态路由? 怎么获取传过来的值

动态路由：本质是多个路径共享一个组件

动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：

{
 path: '/details/:id'
 name: 'Details'
 components: Details
}

访问details目录下的所有文件，如果details/a，details/b等，都会映射到Details组件上。

当匹配到/details下的路由时，参数值会被设置到this. r o u t e . p a r a m s 下 ， 所 以 通 过 这 个 属 性 可 以 获 取 动 态 参 数 t h i s . ： route.params下，所以通过这个属性可以获取动态参数 this.： route.params下，所以通过这个属性可以获取动态参数this.：route.params.id
总结：
在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id

9.vue-router 有哪几种导航钩子?

1、全局钩子函数：定义在全局的路由对象中，主要有：
beforeEach：在路由切换开始时调用
afterEach：在每次路由切换成功进入**阶段时被调用

2、单独路由独享的钩子：
可以在路由配置上直接定义 beforeEnter 钩子

3、组件的钩子函数：定义在组件的router选项中
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

10.$route 和 $router 的区别

$router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。

$route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。

11.vue-router响应路由参数的变化

• (1)用watch 检测

• (2)组件内导航钩子函数

12.vue-router传参

1)使用Params:

• 只能使用name，不能使用path
• 参数不会显示在路径上
• 浏览器强制刷新参数会被清空

2）使用Query：

• 参数会显示在路径上，刷新不会被清空
• name 可以使用path路径

13.vue-router的两种模式

hash模式：
hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以*的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。

history路由：
history api可以分为两大部分，切换和修改

切换：包括go,back,forward三个方法，对应浏览器的前进，后退，跳转操作

修改：包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，这里的页面状态就是页面字体颜色，其实滚动条的位置，阅读进度，组件的开关的这些页面状态都可以存储到state的里面。

14.vue-router实现路由懒加载（ 动态加载路由 ）

1、vue异步组件
vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .
但是,这种情况下一个组件生成一个js文件

2、es提案的import()

3、webpack的require,ensure()
vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

15.vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store，注入。新建了一个目录store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

16.vuex有哪几种属性

有五种，分别是 State、 Getter、Mutation 、Action、 Module。

17.不使用Vuex会带来什么问题

一、可维护性会下降，你要想修改数据，你得维护三个地方

二、可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的

三、增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

18、Vuex中actions和mutations的区别

actions：

1、用于通过提交mutation改变数据

2、会默认将自身封装为一个Promise

3、可以包含任意的异步操作

mutations：

1、通过提交commit改变数据

2、只是一个单纯的函数

3、不要使用异步操作，异步操作会导致变量不能追踪

19、vuex的Mutation特性是？

1、Action 类似于 mutation，不同在于：
2、Action 提交的是 mutation，而不是直接变更状态。
3、Action 可以包含任意异步操作

20、Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

1、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
2、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便。

21、vuex的State特性是？

1、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data
2、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
3、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

22、vuex的Getter特性是？

1、getters 可以对State进行计算操作，它就是Store的计算属性
2、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
3、 如果一个状态只在一个组件内使用，是可以不用getters

23、你是怎么认识vuex的？

vuex可以理解为一种开发模式或框架。比如PHP有thinkphp，java有spring等。
通过状态（数据源）集中管理驱动组件的变化（好比spring的IOC容器对bean进行集中管理）。

应用级的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。

24、为什么需要虚拟DOM，它有什么好处?

​ Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化。

​ 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。**所以，**用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

25、vue为什么不直接操作dom？

因为操作dom对象后，会触发一些浏览器行为，比如布局（layout）和绘制（paint）。　　paint是一个耗时的过程，然而layout是一个更耗时的过程，我们无法确定layout一定是自上而下或是自下而上进行的，甚至一次layout会牵涉到整个文档布局的重新计算。浏览器的layout是lazy的，也就是说：在js脚本执行时，是不会去更新DOM的，任何对DOM的修改都会被暂存在一个队列中，在当前js的执行上下文完成执行后，会根据这个队列中的修改，进行一次layout。

26、怎么理解vue是一个渐进式的框架？

我觉得渐进式就是不必一开始就用Vue所有的全家桶，可以根据场景，按需使用想要的插件。也可以说就使用vue不需要太多的要求。

27、 vue和jQuery的区别

jQuery是使用选择器( $ )选取对象，对其进行复制、取值、时间绑定等操作，其实和原生的HTML的区别只在于更方便的选取和操作dom对象，而数据和界面是在一起的。不如需要获取label标签的内容： $ (“lable”)val();它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不在需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM

28、 vue全家桶包含哪些？

vue全家桶：

vue（整体架构） +  vuex（状态管理） +  vue-router（路由） +  vue_resource || axios（ajax请求） +  mint-UI(移动端UI框架库) || antd-vue(PC端UI框架库)