Vue面试题

1、vue的生命周期

Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM —— 渲染、更新 —— 渲染、卸载等一系列过程，称为Vue的生命周期，分为8个阶段，创建前后、载入前后、更新前后、销毁前后

beforeCreate （创建前） 实例组件刚创建，元素 DOM 和数据都还没有初始化，暂时不知道能在这个周期里面进行生命操作。

created （创建后）数据 data 已经初始化完成，方法也已经可以调用，但是DOM 未渲染，在这个周期里面如果进行请求时可以改变数据并渲染，由于 DOM 未挂载，请求过多或者占用时间过长会导致页面显示空白。

beforeMount （载入前） DOM 未完成挂载，数据初始化完成，但是数据的双向绑定还是显示{{}}，这是因为 Vue 采用了 Virtual DOM （虚拟ＤＯＭ）技术，先占住了一个坑。

mounted （载入后） 数据和DOM都完成挂载，在上一个周期展位的数据把值给渲染进去。一般请求会放在这个地方，因为这边请求改变数据之后刚好能渲染。

beforeUpdate （更新前） 只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果没有数据改变不执行。

updated （更新后） 只要是页面数据改变了都会触发，数据更新完毕，页面的数据时更新完成的。beforeUpdate和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死循环。

beforeDestroy （销毁前） 在实例销毁之前调用，实例仍然完全可用。

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

2、Vue中 data 必须是一个函数

在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。

3、Vue中 key 值的作用

使用key来给每个节点做一个唯一的标识

key的作用主要是为了高效的更新虚拟DOM，另外Vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让Vue可以区分它们，否则Vue只会替换其内部属性而不会触发过渡效果

4、对MVVM开发模式的理解

MVVM分为 Model、View、ViewModel三者

Model 代表数据模型，数据和业务逻辑都在Model层中定义

View 代表UI视图，负责数据的显示

ViewModel 负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作

Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系，因此当 Model 中的数据改变时会触发 View 层的刷新， View 中由于用户交互操作而改变的数据也会在 Mode l中同步，因此开发这只需要专注对数据的维护操作即可，而不需要自己操作DOM。

5、Vue 有哪些指令

v-bind、v-if、v-show、v-for、v-on、v-html

6、v-if 和 v-show 有什么区别？

v-show 控制元素的显示方式，将 display 属性在 block 和 none 来回切换，而 v-if 是动态的添加或删除DOM元素

7、Vue 实现双向数据绑定的原理

Vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，通过劫持 object.defineProperty() 中的set和get属性

8、Vue 组件间传递参数

• 父组件传给子组件：子组件通过 props 方法接受数据
• 子组件传给父组件：通过 $emit 方法传递参数
• 兄弟组件间的传值：eventBus，就是创建一个事件中心，相当于中转战，可以用它来传递事件和接收事件

9、Vue 的优点是什么？

• 低耦合。 视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变
• 可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑
• 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于叶面设计，使用 Expression Blend 可以很容易设计界面并生成XML代码
• 可测试。界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写

10、Vue 路由的钩子函数

首页可以控制导航跳转，beforeEach、afterEach等，一般用于页面 title 的修改，一些需要登录才能调整页面的重定向功能
beforeEach 主要有3个参数 to、from、next
to：route 即将进入的目标路由对象
from：route 当前导航正要离开的路由
next：function 一定要调用该方法 resolve 这个钩子，执行效果依赖 next 方法的调用参数，可以控制页面的跳转

11、导航钩子有哪些？它们有哪些参数

导航钩子有

• 全局钩子和组件内独享的钩子
• beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteLeave
• 参数to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，如果不用就拦截）最常用就这几种

12、Vuex 是什么？怎么使用？哪种功能场景使用它

vue 框架状态管理，在main.js 引入store，注入，新建了一个目录 store，然后导出，场景有：单页应用中，组件之间的状态，音乐播放，登录状态、加入购物车

13、< keep-alive >< /keep-alive >的作用是什么？

< keep-alive >< /keep-alive >包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。 大白话：比如有一个列表和一个详情，那么用户就会经常执行打开详情 => 返回列表 => 打开详情… 这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用< keep-alive >< /keep-alive >进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染

14、$nexrTick是什么？

vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行dom更新
$ nextTick是在下次dom更新循环结束之后执行延迟回调，在修改数据之后使用$textTick,则可以在回调中获取更新后的dom

15、axios的特点有哪些？

axios是一个基于promise的HTTP库，支持promise的多有API
它可以拦截请求和响应
它可以转换请求数据和响应数据，并对响应回来的内容自动转换为JSON类型的数据
它安全性更高，客户端支持防御XSRF

16、vue中的ref是什么？

ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $ref 对象上，如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，如果用在子组件上，引用就指向组件实例