Vue常问面试题2022（每天记十个肝货）

景致之智

已于 2022-03-28 10:55:42 修改

阅读量2k

点赞数 1

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

于 2022-03-28 10:46:14 首次发布

本文链接：https://blog.csdn.net/weixin_54540261/article/details/123788011

版权

vue面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.Vue的优点

2.什么是MVVM框架？它适用于哪些场景？

3.Vue.js中标签如何绑定事件？

4.如何定义Vue-router的动态路由？

5.如何获取传过来的动态参数？

6.Vuex是什么？如何使用？在哪种功能场景中使用它？

7.如何实现自定义指令？它有哪些钩子钩子函数？还有哪些钩子函数参数？

8.至少说出Vue.js中的四种指令和她们的用法

9.导航钩子有哪些？她们有哪些参数

10.请详细说明你对Vue.js生命周期的理解

Vue的优点

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb;
简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；
双向数据绑定：保留了angular的特点，在数据操作方面更为简单；
组件化：保留了react的优点，实现HTML的封装和重用，在构建单页面应用方面有着独特的优势；
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
虚拟dom：dom操作时非常消耗性能的，不再使用原生的dom操作节点，极大的解放dom操作，但具体操作还是dom不过是换了另一种方式；
运行速度更快：相比较于react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。

什么是MVVM框架？它适用于哪些场景？

MVVM框架是一个Model-View-View Model框架，其中ViewModel连接模型（Model）和视图（View）；
在数据操作比较多的场景中，MVVM框架更适合，有助于通过操作数据渲染页面。

Vue.js中标签如何绑定事件？

绑定事件有两种方式

通过v-on指令，<input v-on:click=doLog()/>。
通过@语法糖，<input @click=doLog()/>。

如何定义Vue-router的动态路由？

在静态路由名称前面添加冒号，例如，：to=”{path:ph}”。

如何获取传过来的动态参数？

在组件中，使用$router对象的 query.id，即 $route. query.id 。

Vuex是什么？如何使用？在哪种功能场景中使用它？

vuex是针对 Vue. js框架实现的状态管理系统。
为了使用vuex，要引入 store，并注入Vue.js组件中，在组件内部即可通过$ ostore访问 store对象。
使用场景包括：在单页应用中，用于组件之间的通信，例如音乐播放、登录状态管理、加入购物车等。

如何实现自定义指令?它有哪些钩子钩子函数？还有哪些钩子函数参数？

自定义指令包括以下两种:

全局自定义指令：vue.js对象提供了 directive方法，可以用来自定义指令。directive方法接受两个参数，一个是指令名称，另一个是函数。
局部自定义指令：通过组件的 directives属性定义。

它有如下钩子函数。

bind：在指令第一次绑定到元素时调用。
inserted：在被绑定元素插入父节点时调用（Vue2.0新增的）。
update：在所在组件的 VNode更新时调用。
componentUpdated：在指令所在组件的 VNode及其子 VNode全部更新后调用（Vue2.0新增的）。
unbind：只调用一次，在指令与元素解除绑定时调用。

钩子函数的参数如下。

el：指令所绑定的元素。
binding：指令对象。
vnode：虚拟节点。
oldVnode：上一个虚拟节点。

至少说出Vue.js中的四种指令和她们的用法

v-if：判断对象是否隐藏。
v-for：循环渲染。
v-bind：绑定一个属性。
v- model：实现数据双向绑定。

导航钩子有哪些？她们有哪些参数

导航钩子又称导航守卫，又分为全局钩子、单个路由独享钧子和组件级钧子。

全局钩子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。
单个路由独享钩子有 beforeEnter。
单个路由独享钩子有 beforeEnter。
组件级钩子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。

它们有以下参数

to：即将要进入的目标路由对象。
from：当前导航正要离开的路由。
next：一定要用这个函数才能到达下一个路由，如果不用就会遭到拦截。

请详细说明你对Vue.js生命周期的理解。

总共分为8个阶段，分别为 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。

beforeCreate：在实例初始化之后，数据观测者（ data observer）和 event/ watcher事件配置之前调用。
created：在实例创建完成后立即调用。在这一步，实例已完成以下的配置：数据观测者，属性和方法的运算， watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。
beforeMount：在挂载开始之前调用，相关的 render函数首次调用。
mounted: el被新创建的vm.$el替换，并且在挂载到实例上之后再调用该钩子如果root实例挂载了一个文档内元素，当调用 mounted时vm.sel也在文档内。
beforeUpdate：在数据更新时调用，发生在虛拟DOM重新渲染和打补丁之前。
updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩。
beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：在 Vue. js实例销毀后调用。调用后，Vue. js实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。