“金三银四”的时候到了，一大批准备跳槽的程序员蠢蠢欲动，小编最近也在投简历，找工作。现在很多公司都要求vue、react、ng三大主流框架中的一两个。小编在此总结一下vue常见的面试题，希望对面试的小伙伴有帮助。

一、Vue的生命周期的理解

beforeCreate(创建前) 在数据观测和初始化事件还未开始。

created(创建后) 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来。

beforeMount(载入前) 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted(载入后) 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

beforeUpdate(更新前) 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。

destroyed(销毁后) 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

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

会先后触发beforeCreate, created, beforeMount, mounted。

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

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

二、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变更双向绑定效果。

三、Vue组件间的参数传递

常见传参方式

父组件向子组件传值：

1)子组件在props中创建一个属性，用来接收父组件传过来的值；

2)在父组件中注册子组件；

3)在子组件标签中添加子组件props中创建的属性；

4)把需要传给子组件的值赋给该属性；

子组件传给父组件：

$emit方法传递参数。

四、vue中的作用。

是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

五、vue的指令有哪些？

v-text，v-html， v-once， v-show，v-if， v-for，v-bind，v-model，自定义指令。

六、v-for中为什么使用key？

使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;(因为Virtual DOM 使用Diff算法实现的原因)。

七、v-show和v-if指令的共同点和不同点。

v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏。

v-if令是直接销毁和重建DOM达到让元素显示和隐藏的效果。

八、如何让CSS只在当前组件中起作用

将当前组件的

九、封装组件步骤

1. 建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。

2. 准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。

3. 准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。

4. 封装完毕了，直接调用即可。

十、引入组件的步骤

1.采用ES6的import ... from ...语法或CommonJS的require()方法引入组件

2.对组件进行注册,代码如下

Vue.component('my-component', { template: '

'})

3.使用组件

十一、vuex有哪几种属性？

State、 Getter、Mutation 、Action、 Module

state => 基本数据(数据源存放地)。

getters => 从基本数据派生出来的数据 。

mutations => 提交更改数据的方法，同步。

actions => 像一个装饰器，包裹mutations，使之可以异步。

modules => 模块化Vuex。

Mutations的更改是同步更改，用于用户执行直接数据更改，this.$store.commit(‘名’)触发

Actions的更改是异步操作，用于需要与后端交互的数据更改,this.$store.dispath(“名”)触发

注意：

1)：定义actions方法创建一个更改函数时，这个函数必须携带一个context参数，用于触发mutations方法，context.commit(‘修改函数名’ , ’异步请求值’)；

2)：mutations第一个参数必须传入state，第二个参数是新值。

十二、axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。

get请求

// 向具有指定ID的用户发出请求

axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

// 也可以通过 params 对象传递参数

axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

post请求

axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

并发请求

function getUserAccount() {return axios.get('/user/12345');} function getUserPermissions() {return axios.get('/user/12345/permissions');}axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {//两个请求现已完成}));

你面试的时候碰到哪些关于vue的面试问题呢，交流一下，互相学习。前端大佬有补充的，不胜赐教。加油加油。

每日一句

愿你在今后的每个日子里即使单枪匹马，也能勇敢无畏。