前端开发实习面试题（Vue篇）

1.介绍一下Vue的生命周期钩子函数，请详细说下你对Vue生命周期的理解？

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。在vue组件中，组件的实例从创建前(beforeCreate)、创建后(created)、挂载前(beforeMount)、挂载后(mounted)、更新前(beforeUptate)、更新后(updated)、销毁前(beforeDestroy)、销毁后(destroyed)一系列，即从创建到销毁的整个过程，我们把它称之为vue组件的一个完整的生命周期。

beforeCreate(){}：实例初始化之前数据没有加载页面没有显示

　　　　　　　　　debugger; 断点调试

　　　　往往在这个阶段做loading 请求状态

Created(){}：实例初始化后，请求到了数据，事件，属性等，但是没有加载，页面依然没有显示，在这个阶段，往往发送 ajax请求，http请求

　　　　　 create---beforeMount之间 vue会在options中查找有没有el选项，有就把它作为模板，没有就通过vm.$mount() 去挂载

created之后有个判断，先看你有没有el属性，在看看有没有模板属性，有模板属性呢，就会把模板上的东西渲染出去，没有模板属性呢，就把el上的东西当做模板渲染出去，

created-boforeMount的过程就是找模板，而模板都是虚拟的

beforeMount(){}：vue会将el对应的模板加到$el中去,但是还没有挂载出去，页面没有显示

mounted(){}：页面加载出来

beforeUpdate(){}：数据更新前，在虚拟dom中使用differ算法，在内存中实现的，mounted之前的过程就不管了。如果想看属性的变化，

　　　　　　　　　　　　　　在这个阶段可以使用watch(属性监听)这个方法监听属性

update(){}：更新完了，在渲染，谁改变了渲染谁，不是整个dom树重新渲染

beforeDestroy(){}：销毁之后

　　　　　　　　　　　　　　 destroy销毁，实例销毁需要人为触发

　　　　　　　　销毁：之前渲染好的保持不变，保留下来，后面再使用这个实例就不起作用了

　　　　　　　　　　　　　　 Vm.$destroy() 进行销毁

destroyed(){}：销毁之后

简述一下每个周期具体适合那些场景：

beforeDestroy：可以在这加个loading事件，在加载实例是触发

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

mouted：挂载元素，获取到DOM节点

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

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

nextTick：更新数据后立即操作Dom

答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后

创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

什么是vue生命周期？

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

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

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

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

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

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

答：会触发下面这几个beforeCreate、created、beforeMount、mounted 。

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

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

2.Vue有哪些指令，各自的用处是什么？

v-if：根据表达式的值的真假条件渲染元素，在切换时元素及它的数据绑定/组件被销毁并重建。
v-show：根据表达式之真假值，切换元素的display CSS 属性。
v-for：循环指令，基于一个数组或对象渲染一个列表，Vue 2.0 以上必须需配合key值使用。
v-bind：动态地绑定一个或多个特性，或一个组件prop到表达式。缩写为 :
v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。缩写为 @
v-model：实现表单输入和应用状态之间的双向绑定。
v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译。
v-once：只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

v-slot：使用插槽的指令，缩写为 #

3.Vue双向绑定是如何实现的，原理是什么？

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue追踪依赖，在属性被访问和修改时通知变化。
vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。

4.v-if和v-show有什么不同，平时怎么运用它们？

v-if 在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销比v-show大
v-show控制的是元素的display属性，无论初始条件是否成立，都会渲染标签。而v-if是惰性的，只有在条件成立时才渲染为真实的标签，条件为假，不会去渲染标签

项目中如何使用？

当初始条件为假时，v-show初始渲染开销较高,使用v-if
当我们频繁切换开关是，v-if切换开销较高,使用v-show
多路分支，只能选择v-if
具体看开发项目的时候是否频繁操作DOM

5.Vue组件间的参数是怎么传递的？

父组件向子组件传值：使用子组件的时候，通过v-bind:(一个变量)的形式把对应的数据传给子组件。子组件用props:['接收的变量']接收（v-bind:简写就是:）。

子组件向父组件传值：通过this.$emit("触发的事件")向上一层触发事件。父组件恰好在监听这个事件v-on+(要监听的事件)，监听过后，就能获取到子组件带出来的内容，实现子组件向父组件传值的功能。

当我点击子组件的时候，子组件会对外触发一个delete事件，那么我在父组件里创建子组件的同时，可以去监听这个delete事件，如何监听事件呢？v-on+(要监听的事件)监听事件(v-on缩写为@)。一旦delete事件被触发的时候，就会执行父组件里面的handleItemDelete这个方法。子组件一旦被点击的时候，不但触发一个delete事件，同时还把this.index作为参数带给父组件，父组件正好在这又监听delete事件，它会执行handleItemDelete这个方法，这个方法就会拿到子组件传递过来的index的值。

单向数据流(隐性的规定)：父组件可以向子组件传递任何的数据，但子组件不能修改父组件传递过来的数据，如果一定要修改，先把数据count拷贝一份副本number出来，用这个副本，修改这个副本就可以了。

Vue中兄弟组件间的传值：

一：子传父，父传子。

二（eventBus）：

兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据。
创建一个Vue的实例，让各个兄弟共用同一个事件机制。
传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。
接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。

三：Vuex（如我的去哪儿网APP就运用Vuex实现首页和城市页数据的共享）

6.<keep-alive></keep-alive>的作用是什么?

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染，能大量优化web性能

比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染。

7.Vuex是什么？有什么作用？在哪些场景可以运用？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

只用来读取的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中。
在main.js引入store，注入。新建了一个目录store，… export

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

state：Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据
mutations：mutations定义的方法动态修改Vuex 的 store 中的状态或数据
getters：类似vue的计算属性，主要用来过滤一些数据
action：actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action

8.使用过什么插件？

vue-awesome-swiper - vue.js触摸滑动组件，js插件swiper的vue版本
Better-scroll - 一个移动端滚动的解决方案，better-scroll 很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等
stylus - CSS预处理器
vuex - 专为 Vue.js 应用程序开发的状态管理模式
vue-axios - 将axios整合到VueJS的封装
vue-resource - Vue与后台api进行交互通常是利用vue-resource来实现的，本质上vue-resource是通过http来完成Ajax请求相应的

9.Vue页面跳转的方式（不同方法）？

跳转页面的两种形式：

<router-link>创建a标签来定义导航链接(用a标签的形式跳转页面)
this.$router.push('/')：跳转到首页(用js的形式跳转页面)（这种方式可以使性能大大优化）

10.使用CSS预处理器相比普通的CSS有什么优（缺）点？

优点：

用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

缺点：

简单来说CSS预处理器语言较CSS玩法变得更高级了，但同时降低了自己对最终代码的控制力。更致命的是提高了门槛，首先是上手门槛，其次是维护门槛，再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。

以上皆是本人目前在广州找实习期间亲身经历过的面试题中的Vue问题，部分答案源于网上，如有错漏或有更好的答案也欢迎大家指出，仅作为笔记收录使用，也衷心希望各位能少走弯路，能够找到自己心仪的工作！

前端开发交流QQ群：761614159

求职前端开发的小伙伴可以进群交流一下！