关于Vue，那些你不容错过的前端必问面试题！！！

第一题：vuex的存储流程

State

（1）Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data。

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

mutations：用于同步操作比如会员登录的信息，购物车里的商品等等。

Actions：用于异步操作比如将数据用ajax存放到数据库。

Getters

（1）getters 可以对State进行计算操作，它就是Store的计算属性。
（2）虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用。
（3）如果一个状态只在一个组件内使用，是可以不用getters。

第二题：父传子、子传父、兄弟传值与vuex的区别

父传子：
父组件传过来的值子组件要用props接收。
子传父：
vue2.0中可以使用$emit来向父组件派发事件，父组件中用$on来监听自定义的事件。

第三题：双向绑定的原理

vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

在MDN上对该方法的说明是：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。重点就是最后的属性描述符。

属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。这两种对象只能选择一种使用，不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。

第四题：created与mounted的区别

看实际情况，一般在 created（或beforeRouter） 里面就可以，如果涉及到需要页面加载完成之后的话就用 mounted。

在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素。

而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，（此时document.getelementById 即可生效了）

第五题：VUE路由传参 

indexs=1;

This.$router.push({path:’/goods’,query:{id：indexs}}) //传送参数id=indexs
This.$route.query.id  //接收参数id
This.$router.push({path:’/goods’,params:{id : indexs}})  //传送参数id=indexs
This.$route.params.id  //接收参数id

第六题：axios与jq的ajax和vue-resource的区别

Vue-resource

体积小；支持主流浏览器（不支持ie9-）;支持promiseAPI和URL templates;支持拦截器。

Axios

在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据
客户端支持保护安全免受 CSRF/XSRF 攻击
组件的优势
提高开发效率
方便重复使用
简化调试步骤
提升整个项目的可维护性
便于协同开发
如：导航、列表、弹窗、下拉菜单等

第七题：VUE的生命周期

beforeCreate 初始化之前
created 初始化完成
beforeMount 挂载之前
mounted 挂载完成之后
beforeUpdate 数据更新之前
updated 数据更新之后
beforeDestroy 解除绑定之前
destroyed 解除绑定之后
activated keep-alive组件激活时调用。该钩子在服务器端渲染期间不被调用。用于性能优化缓存dom和数据。
deactivated keep-alive组件停用时调用。该钩子在服务端渲染期间不被调用。

适应场景：

beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom

第八题：v-if与v-show的区别

使用了v-if的时候，如果值为false，那么页面将不会有这个html标签生成。
v-show则是不管值为true还是false，html元素都会存在，只是CSS中的display显示或隐藏
v-if 在切换时有更高的性能开销，而 v-show 在初始渲染时有更高的性能开销。
因此，如果需要频繁切换，推荐使用 v-show，如果条件在运行时改变的可能性较少，推荐使用 v-if。

第九题：vue的hash和history的区别

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})
当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面

第十题：vue的优缺点

Vue和React不同点：

Vue：
1.模版和渲染函数的弹性选择
2.简单的语法及项目创建
3.更快的选软速度和更小的体积
2）React:  1.更适用于大型应用和更好的可测试性
2.同时适用web端和原生App
3.更大的生态圈带来更多的支持和工具

Vue和React相同点：

1.利用虚拟DOM实现快速渲染
2.轻量级
3.响应式组件
4.服务器端渲染
5易于集成路由工具，打包工具以及状态管理工具
优秀的支持和社区

第十一题：Vue.js与其他框架的区别？

1.与angularjs的区别
相同点：
都支持指令：内置指令和自定义指令。
都支持过滤器：内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端浏览器。
不同点：
(1).AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。
(2).在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。
Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。
对于庞大的应用来说，这个优化差异还是比较明显的。
2.与React的区别
相同点：
react采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用。
中心思想相同：一切都是组件，组件实例之间可以嵌套。
都提供合理的钩子函数，可以让开发者定制化地去处理需求。
都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。
在组件开发中都支持mixins的特性。
不同点：
React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。
Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。
四.应用场景：
针对具有复杂交互逻辑的前端应用；
它可以提供基础的架构抽象；
可以通过AJAX数据持久化，保证前端用户体验
好处：
当前端和数据做一些操作的时候，可以通过AJAX请求对后端做数据持久化，不需要刷新整个页面，只需要改动DOM里需要改动的那部分数据。特别是移动端应用场景，刷新页面太昂贵，会重新加载很多资源，虽然有些会被缓存，但是页面的DOM,JS,CSS都会被页面重新解析一遍，因此移动端页面通常会做出SPA单页应用。
Vue.js的特点：MVVM框架、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

第十二题：slot插槽的使用

答：就是将父组件的内容放到子组件指定的位置叫做内容分发。
比如：父组件：

父组件app.vue

<template>
  <div id="app">
    <test-slot>
      <span>我是父组件里的文字，但是我要被放到子组件里</span>
    </test-slot>
  </div>
</template>

<script>
import testSlot from './components/testSlot'
export default {
  data(){
    return {

    }
  },
  components:{
    testSlot
  }
}
</script>

<style>

</style>

子组件testSlot.vue 

<template>
  <div>
    <h3>test-slot</h3>
    //父组件里的span会替换掉slot所以这里的123是看不见的
    //如果父组件在使用子组件testSlot的时候不在里面加内容则这里的slot会显示出来
    <slot>123</slot>
  </div>
</template>

<script>
export default {
  data(){
    return {

    }
  }
}
</script>

<style>

</style>

第十三题：vue中nextTick的使用

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

你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。使用时机：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数，此时页面并未全部渲染。在某个动作有可能改变DOM元素结构的时候，对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中。

第十四题：vue的性能优化

1、 路由懒加载。
2、 使用webpack的require.ensure进行页面切割build之后会按照页面生成相应的js文件做到按需加载。
3、 使用keep-alive做页面缓存，多次访问相同的页面不会重新渲染数据和获取dom，如果想多次获取数据比如动态路获取数据需要传参展示不同的数据，那么需要使用钩子函数activated来解决缓存问题。
4、在做v-for加一个:key这样就触发了diff算法，支持了虚拟dom。

第十五题：你用vue封装过的组件吗？

答：封装过：alert、toast、模态框、上拉加载数据等。还有一些页面的组件比如，公共头 。

第十六题：vue路由的钩子函数（导航守卫）

1、 beforeEach：每次每一个路由改变的时候都得执行一遍。一般用来做会员权限（是否登录可以访问页面）
2、 afterEach：你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身
3、 beforeRouteEnter：在渲染该组件的对应路由被 confirm 前调用。不！能！获取组件实例 `this`。因为当守卫执行前，组件实例还没被创建。
4、 beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用。举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。可以访问组件实例 `this`。
5、 beforeRouteLeave：导航离开该组件的对应路由时调用，可以访问组件实例 `this`。

第十七题：vue如何解决刷新或者加载出现闪烁（显示变量）

用v-cloak解决。具体解决方法：

<div class="#app">
    <p>{{value.name}}</p>
</div>
在加载的时候会看到

{{value.name}}
在页面出现，过了几秒之后才会渲染数据，在vue中有个指令可以解决这个问题，v-cloak
那么，v-cloak要放在什么位置呢，是不是每个需要渲染数据的标签都要添加这个指令，经过试验发现，v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以，

<div class="#app" v-cloak>
    <p>{{value.name}}</p>
</div>
而且，在css里面要添加
[v-cloak] {
    display: none;
}
这样就可以防止页面闪烁了。

但是有的时候会不起作用，可能的原因有二：

1、v-cloak的display属性被层级更高的给覆盖掉了，所以要提高层级

[v-cloak] {
    display: none !important;
}

2、样式放在了@import引入的css文件中

v-cloak的这个样式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中

第十八题：vue里面的data必须是一个函数吗？为什么？

data必须是一个函数，如果data是一个对象每个组件的data都是引用类型,一个数据改变了其他也改变了；data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响。

第十九题：v-if true和false变换，生命周期会重新渲染

初始渲染

初始值为 false 组件不会渲染，生命周期钩子不会执行，v-if 的渲染是惰性的。
初始值为 true 时，组件会进行渲染，并依次执行 beforeCreate,created,beforeMount,mounted 钩子。

切换

false => true
依次执行 beforeCreate,created,beforeMount,mounted 钩子。
true => false
依次执行 beforeDestroy,destroyed 钩子。

v-show

渲染

无论初始状态，组件都会渲染，依次执行created,beforeMount,mounted 钩子，v-show 的渲染是非惰性的。

切换

对生命周期钩子无影响，切换时组件始终保持在 mounted 钩子。