前端Vue面试题笔试题

前言

接上篇前端Js笔试题面试题，收集整理Vue相关的面试题，供自己现在和以后学习和面试，也希望能对点进来的小伙伴有所帮助。

Vue基础必备

1、v-show 与 v-if 区别

1、v-show是css切换，v-if是完整的销毁和重新创建。

2、使用频繁切换时用v-show，运行时较少改变时用v-if

3、v-if=‘false’ v-if是条件渲染，当false的时候不会渲染

2、Class 与 Style 如何动态绑定？

Class

1、对象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"

2、数组方法 v-bind:class="[class1, class2]"<

3、行内 v-bind:style="{color: color, fontSize: fontSize+'px'}"

Stlye

1、对象方法 <v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"

2、数组方法 v-bind:style="[styleColor,styleSize]"

3、计算属性和 watch 的区别

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch： 更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

1、当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

2、当我们需要在数据变化时执行异步或开销较大的操作时，应该使用watch，使用watch选项允许我们执行异步操作 ( 访问一个API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

4、事件修饰符

.native:绑定一个原生的click事件

.prevent: 提交时间不再重载页面

.stop:阻止单击事件冒泡

.self:当事件发生在该元素本身而不是子元素的时候触发

.capture:事件侦听，事件发生的时候会调用

组合键 click.ctrl.exact 只有ctrl被按下的时候才触发

5、组件中 data 为什么是函数

因为组件是用来复用的，JS 里对象是引用关系，这样作用域没有隔离，而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

6、开发中常用的指令有哪些

v-model :一般用在表达输入，很轻松的实现表单控件和数据的双向绑定

v-html:更新元素的 innerHTML

v-show 与 v-if:条件渲染,

v-on : click:可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数

v-for:基于源数据多次渲染元素或模板块

v-bind:当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

7、v-model 的原理

vue 项目中主要使用v-model指令在表单 input、textarea、select 等元素上创建双向数据绑定，我们知道 v-model 本质上不过是语法糖，v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

1、text 和 textarea 元素使用 value 属性和 input 事件；

2、checkbox 和 radio 使用 checked 属性和 change 事件；

3、select 字段将 value 作为 prop 并将 change 作为事件;

8、vue插槽

单个插槽<

当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身

命名插槽

solt元素可以用一个特殊的特性name来进一步配置如何分发内容。多个插槽可以有不同的名字。这样可以将父组件模板中 slot 位置，和子组件 slot元素产生关联，便于插槽内容对应传递

作用域插槽

可以访问组件内部数据的可复用插槽(reusable slot)在父级中，具有特殊特性 slot-scope 的<template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象

9、组件之间的传值通信

1、父组件给子组件传值

使用props，父组件可以使用props向子组件传递数据

2、子组件向父组件通信

父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件

3、非父子，兄弟组件之间通信

可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发(&dollar;emit)和监听(&dollar;on)来实现通信和参数传递

10、对keep-alive的了解

keep-alive是一个内置组件，可使被包含的组件保留状态或避免重新渲染，有include（包含的组件缓存）和exclude（排除的组件不缓存）两个属性。

对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

11、 Vue computed 实现

1、建立与其他属性（如：data、 Store）的联系；

2、属性改变后，通知计算属性重新计算

Vue生命周期

12、请详细说下你对vue生命周期的理解

生命周期共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后

创建前后 beforeCreate/created

在beforeCreate 阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象有了，el还没有。

载入前后 beforeMount/mounted

在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前未虚拟的DOM节点，data尚未替换。在mounted阶段，vue实例挂载完成，data成功渲染。

更新前后 beforeUpdate/updated

当data变化时，会触发beforeUpdate和updated方法。这两个不常用，不推荐使用。

销毁前后beforeDestory/destoryed

beforeDestory是在vue实例销毁前触发，一般在这里要通过removeEventListener解除手动绑定的事件。实例销毁后，触发的destroyed。

生命周期的作用？

生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程中更容易形成好的逻辑。

13、请列举出3个Vue中常用的生命周期钩子函数?

created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见

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

activated: keep-alive组件激活时调用

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

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

15、在什么阶段才能访问操作DOM？

在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，所以在 mounted 中可以访问操作 DOM。

16、在哪个生命周期内调用异步请求？

可以在钩子函数 created、beforeMount、mounted中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是本人推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

1、能更快获取到服务端数据，减少页面loading 时间

2、ssr不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性

Vue-Router路由

17、vue-router 路由模式有几种？

vue-router 有 3 种路由模式：hash、history、abstract

1、hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器

2、history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式

3、abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

18、路由的跳转方式

一般有两种

1、声明式（标签跳转）

<router-link to='home'>router-link标签会渲染<a>标签，在template中的跳转都是这种；

2、编程式（ js跳转）

另一种是编程是导航也就是通过js跳转比如router.push('/home')

19、路由原理

前端路由实现起来其实很简单，本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式

1、hash 模式

2、history 模式

www.test.com/##/ 就是 Hash URL，当 ## 后面的哈希值发生变化时，不会向服务器请求数据，可以通过 hashchange 事件来监听到 URL 的变化，从而进行跳转页面。
History模式是 HTML5 新推出的功能，比之 Hash URL 更加美观

20、Vue的路由实现：hash模式和 history模式

1、hash模式: 在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

2、history模式： history采用HTML5的新特性；且提供了两个新方法： pushState(),replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更

21、vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next

to：route即将进入的目标路由对象。

from：route当前导航正要离开的路由。

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转

22、&dollar;route和$router的区别

&dollar;route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

23、vue-router怎么定义动态路由？怎么获取传过来的动态参数？

  定义：path:'a/:value' 获取：this.$route.params.value。

Vuex

23、Vuex的工作流程，以及它的作用，使用场景。

vuex的工作流程：

1、在vue组件里面，通过dispatch来触发actions提交修改数据的操作。

2、然后再通过actions的commit来触发mutations来修改数据。

3、mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。

4、最后由store触发每一个调用它的组件的更新

Vuex的作用：项目数据状态的集中管理，复杂组件(如兄弟组件、远房亲戚组件)的数据通信问题。

24、vue 中 ajax 请求代码应该写在组件的methods中还是vuex 的action中

如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里

如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回

25、vuex是什么？怎么使用？哪种功能场景使用它？

1、只用来读取的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事件；异步逻辑应该封装在action中。

2、在main.js引入store，注入。新建了一个目录store，… export

3、场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

Vue其他相关

26、怎么快速定位哪个组件出现性能问题

用 timeline 工具。大意是通过 timeline 来查看每个函数的调用时常，定位出哪个函数的问题，从而能判断哪个组件出了问题

27、MVVM

MVVM 由以下三个内容组成

View：界面

Model：数据模型

ViewModel：作为桥梁负责沟通 View 和 Model

28、路由懒加载

为了提升页面加载速度，实现按需加载，也就是当路由访问时才加载对应组件，我们可以结合vue的异步组件和webpack的代码分割功能来实现路由的懒加载。

{
    path: '/iov/login',
    name: '登录',
    component: resolve => require(['@/views/login/login'], resolve),
},
{
    path:'/iov/organization',
    name:'组织管理',
    component:() => import('@/views/enterprise/organization')
}

29、elementUI

表单弹窗中 elementform 清除验证残留提示

给表单添加不同的 ref （REFNAME），如果有相同的ref 会导致残留验证提示清除失败

    this.dialogTranspor = true
    //弹窗打开后 dom 没有生成，所有要用 this.$nextTick
   
    this.$nextTick(function () {
     
        this.$refs.REFNAME.resetFields();

      })

页码数无法正常显示

场景：列表页在跳到详情或其他页面后再返回列表页，无法正常显示对应页数（页码数放在state中），但请求的数据时正常的;

解决方案：页码数、总页数必须要在同一个对象中，否则当前页码数不能正常显示

30、NextTick

nextTick可以让我们在下次 DOM 更新循环结束之后执行延迟回调，用于获得更新后的 DOM

// 修改数据
vm.msg = 'Hello'
// DOM 还未更新
Vue.nextTick(function () {
  // DOM 更新
})

31、指令v-el的作用是什么?

提供一个在页面上已存在的 DOM元素作为 Vue实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例,
### 32、在Vue中使用插件的步骤
采用ES6的import ... from ...语法或CommonJS的require()方法引入插件
使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })