前端Vue面试题笔试题

前言

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

目录:

前端HTML+CSS笔试题面试题

前端JS笔试题面试题

前端小程序笔试题面试题

Vue基础必备

1、v-showv-if区别

1、v-showcss切换,v-if是完整的销毁和重新创建。

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

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

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

<b>Class</b>

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

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

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

<b>Stlye</b>

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、事件修饰符

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

.stop:阻止单击事件冒泡

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

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

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

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

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

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

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

v-html:更新元素的 innerHTML

v-showv-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事件触发($emit)和监听($on)来实现通信和参数传递

10、对keep-alive的了解

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

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

11、 Vue computed 实现

1、建立与其他属性(如:data、 Store)的联系;

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

Vue生命周期

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

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

创建前后 beforeCreate/created

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

<font color='red'>载入前后 beforeMount/mounted</font>

在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.\$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

toroute即将进入的目标路由对象。

fromroute当前导航正要离开的路由。

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

22、$route和$router的区别

$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、然后再通过actionscommit来触发mutations来修改数据。

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

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

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

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

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

如果被其他地方复用,请将请求放入 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

<b>表单弹窗中 elementform 清除验证残留提示</b>

给表单添加不同的 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中使用插件的步骤

采用ES6import ... from ...语法或CommonJS的require()方法引入插件
使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })