从前端学习到找一份合适的工作，大大小小的面试必不可少，所以我对中级前端面试题进行了初步整理，也方便自己查阅，也希望对小伙伴们有所帮助！

Vue

——————————————————————————————————————

vue生命周期

什么是Vue生命周期？

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

Vue生命周期的作用是什么？

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

Vue生命周期总共有几个阶段？

它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

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

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

DOM渲染在哪个周期中就已经完成？

DOM 渲染在 mounted 中就已经完成了

每个生命周期适合哪些场景？

生命周期钩子的一些使用方法：

beforecreate : 可以在这加个loading事件，在加载实例时触发

created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

mounted : 挂载元素，获取到DOM节点

updated : 如果对数据统一处理，在这里写上相应函数

beforeDestroy : 可以做一个确认停止事件的确认框

nextTick : 更新数据后立即操作dom

v-show与v-if区别

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

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

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

开发中常用的指令有哪些

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

v-html: 更新元素的 innerHTML

v-show 与 v-if: 条件渲染, 注意二者区别

使用了v-if的时候，如果值为false，那么页面将不会有这个html标签生成

v-show则是不管值为true还是false，html元素都会存在，只是CSS中的display显示或隐藏

v-on : click: 可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数 v-for:基于源数据多次渲染元素或模板块 v-bind: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

语法：v-bind:title="msg" 简写：:title="msg"

绑定class的数组用法

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

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

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

组件之间的传值通信

父组件给子组件传值

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

父组件vue模板father.vue

<template>

<child :msg="message"></child>

</template>

<script>

import child from './child.vue';export default {

components: {

child

},

data () {

return {

message: 'father message';

}

}

}

</script>

子组件vue模板child.vue:

<template>

<div>{{msg}}</div>

</template>

<script>export default {

props: {

msg: {

type: String,

required: true

}

}

}

</script>

子组件向父组件通信

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

父组件vue模板father.vue:

<template>

<child @msgFunc="func"></child>

</template>

<script>

import child from './child.vue';export default {

components: {

child

},

methods: {

func (msg) {

console.log(msg);

}

}

}

</script>

子组件vue模板child.vue:

<template>

<button @click="handleClick">点我</button>

</template>

<script>export default {

props: {

msg: {

type: String,

required: true

}

},

methods () {

handleClick () {

//........

this.$emit('msgFunc');

}

}

}

</script>

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

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

Bus.js可以是这样:

import Vue from 'vue'

export default new Vue()

在需要通信的组件都引入Bus.js:

<template>

<button @click="toBus">子组件传给兄弟组件</button>

</template>

<script>

import Bus from '../common/js/bus.js'export default{

methods: {

toBus () {

Bus.$emit('on', '来自兄弟组件')

}

}

}

</script>

另一个组件也import Bus.js 在钩子函数中监听on事件

import Bus from '../common/js/bus.js'export default {

data() {

return {

message: ''

}

},

mounted() {

Bus.$on('on', (msg) => {

this.message = msg

})

}

}

路由跳转方式

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

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

MVVM

M - Model，Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑

V - View，View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来

VM - ViewModel，ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View

computed和watch有什么区别?

computed:

1. computed是计算属性,也就是计算值,它更多用于计算值的场景

2. computed具有缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算

3. computed适用于计算比较消耗性能的计算场景

watch:

1. 更多的是「观察」的作用,类似于某些数据的监听回调,用于观察props $emit或者本组件的值,当数据变化时来执行回调进行后续操作

2. 无缓存性，页面重新渲染时值不变化也会执行

小结:

1. 当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为computed

2. 如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

key

key是为Vue中的vnode标记的唯一id，通过这个key，我们的diff操作可以 更准确、更快速

准确:

如果不加key,那么vue会选择复用节点(Vue的就地更新策略),导致之前节点的状态被保留下来，会产生一系列的bug

快速:

key的唯一性可以被Map数据结构充分利用

组件中的data为什么是函数？

为什么组件中的data必须是一个函数，然后return一个对象，而new Vue实例里，data可以直接是一个对象？

// datadata() {

return {

message: "子组件",

childName:this.name

}

}

// new Vue

new Vue({

el: '#app',

router,

template: '<App/>',

components: {App}

})

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

Class 与 Style 如何动态绑定？

Class 可以通过对象语法和数组语法进行动态绑定：

对象语法

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {

isActive: true,

hasError: false

}

数组语法

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

data: {

activeClass: 'active',

errorClass: 'text-danger'

}

Style 也可以通过对象语法和数组语法进行动态绑定：

对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {

activeColor: 'red',

fontSize: 30

}

数组语法

<div v-bind:style="[styleColor, styleSize]"></div>

data: {

styleColor: {

color: 'red'

},

styleSize:{

fontSize:'23px'

}

}

vue的单项数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件修改

有两种常见的试图改变一个 prop 的情形 :

这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用

在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：

props: ['initialCounter'],

data: function () {

return {

counter: this.initialCounter

}

}

这个 prop 以一种原始的值传入且需要进行转换

在这种情况下，最好使用这个 prop 的值来定义一个计算属性

props: ['size'],

computed: {

normalizedSize: function () {

return this.size.trim().toLowerCase()

}

}

keep-alive

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 ，其有以下特性：

一般结合路由和动态组件一起使用，用于缓存组件；

提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；

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

v-model 的原理

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

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

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

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

以 input 表单元素为例：

<input v-model='something'>

相当于

<input v-bind:value="something" v-on:input="something = $event.target.value">

如果在自定义组件中，v-model 默认会利用名为 value 的 prop 和名为 input 的事件，如下所示：

父组件：

<ModelChild v-model="message"></ModelChild>

子组件：

<div>{{value}}</div>

props:{

value: String

},

methods: {

test1(){

this.$emit('input', '小红')

},

},

nextTick()

在下次DOM更新循环结束之后执行延迟回调。在修改数据之后，立即使用的这个回调函数，获取更新后的DOM

// 修改数据

vm.msg = 'Hello'

// DOM 还未更新

Vue.nextTick(function () {

// DOM 更新

})

vue插槽

单个插槽

当子组件模板只有一个没有属性的插槽时，

父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，

并替换掉插槽标签本身

命名插槽

solt元素可以用一个特殊的特性name来进一步配置如何分发内容。

多个插槽可以有不同的名字。 这样可以将父组件模板中 slot 位置，

和子组件 slot 元素产生关联，便于插槽内容对应传递

作用域插槽

可以访问组件内部数据的可复用插槽(reusable slot)

在父级中，具有特殊特性 slot-scope 的<template> 元素必须存在，

表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，

此变量接收从子组件传递过来的 prop 对象

vue-router有哪几种导航钩子

第一种：是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截

第二种：组件内的钩子

第三种：单独路由独享组件

vuex

vuex是什么？

vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data

state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新

它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

Vuex有5种属性: 分别是 state、getter、mutation、action、module;

state

Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据

mutations

mutations定义的方法动态修改Vuex 的 store 中的状态或数据

getters

类似vue的计算属性，主要用来过滤一些数据

action

actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action

总结

vuex 一般用于中大型 web 单页应用中对应用的状态进行管理，对于一些组件间关系较为简单的小型应用，使用 vuex 的必要性不是很大，因为完全可以用组件 prop 属性或者事件来完成父子组件之间的通信，vuex 更多地用于解决跨组件通信以及作为数据中心集中式存储数据

你有对 Vue 项目进行哪些优化？

代码层面的优化

v-if 和 v-show 区分使用场景

computed 和 watch 区分使用场景

v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

长列表性能优化

事件的销毁

图片资源懒加载

路由懒加载

第三方插件的按需引入

优化无限列表性能

服务端渲染 SSR or 预渲染

Webpack 层面的优化

Webpack 对图片进行压缩

减少 ES6 转为 ES5 的冗余代码

提取公共代码

模板预编译

提取组件的 CSS

优化 SourceMap

构建结果输出分析

Vue 项目的编译优化

基础的 Web 技术的优化

开启 gzip 压缩

浏览器缓存

CDN 的使用

使用 Chrome Performance 查找性能瓶颈

上一篇

千锋长沙前端培训分享之初级前端面试题整理

下一篇

千锋长沙前端培训分享之高级前端面试题整理