不会吧！都2020年了你还不会这些VUE面试题？

前言

面试中能够问的问题不少，最近几年，我也面试，或者视频面试过不少工做 2-4 年的前端，我通常会抓住他们作的项目，进行更详细的追问。因此，初中级前端面试的时候，除了掌握基础知识以外，项目中用到的技术要理清楚，假如你项目中用到的技术，问的时候却一问三不知，那么，基本上就会 pass 掉了

面试时也尽可能避免一问一答的这种模式，要触类旁通，回答问题是最好结合项目，这样会给面试官一个深入的印象哦！！

var let const 的区别

• var 会变量提高 let 和 const 不会
• var 在全局命名的变量会挂载到 window 上，let const 不会
• let 和 const 有块级做用域（暂时性死去），var 没有
• let const 不容许重复命名

Vue 里面 computed 是什么东西怎么用？

• 在 vue 模板里面是有表达式是很是便利的，可是设计他们的初衷是用来简单运算的。在实际的开发过程当中在模板里放入过多的表达式会让项目的可维护性大大下降。

<div>
{{ data.split('') ? data.split('').reverse().join('') : data.split('' ) }} </div> 复制代码

• 对于这种复杂的计算单数据，咱们应该使用计算属性来解决；
• 计算属性中的方法是依赖于其中的值的，当计算属性中的值变化的时候，计算属性会更新

var vm = new Vue({
 el: '#example',  data: {  data: 'Hello'  },  computed: {  // 计算属性的getter  reversedMessage: function () {  // `this` 指向 vm 实例  return this.data.split('').reverse().join('')  }  } }) 复制代码

• 当 this.data 的值发生变化大时候，他所依赖的计算属性 reversedMessage 会从新计算并调用

Vue 里面的 watch 是什么东西怎么使用？

• 虽然计算属性在大部分状况下都适用，可是在实际开发过程当中须要一些自定义的监听器，当须要在执行异步或者开销比较大的操做中，监听器比计算属性更加有效。

watch：{
 //须要监听的值  question（）{   } } 复制代码

计算属性和监听器看上去是差很少的，可是仍是有区别

watch和computed的区别

计算属性和监听属性都是但愿在依赖数据变化的时候，被依赖的数据根据事先设定好的函数发生自动的变换。 watch 一个数据相应多个数据 computed 一个数据受到多个数据的影响 在实现原理上watch和computed是差很少的，vue 的data值在初始化阶段都会被挂载上 watcher 观察者模式，当数据改变的时候先调用watcher观察者模式，而后调用计算属性，和监听属性。本质上来讲没有多大区别

请说出 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-if 和 v-show 有什么区别

共同点：

v-if 和 v-show 都是动态显示 DOM 元素。

区别：

一、编译过程： v-if 是 真正 的 条件渲染，由于它会确保在切换过程当中条件块 内的事件监听器和子组件适当地被销毁和重建。v-show 的元素始终会被渲染并 保留在 DOM 中。 v-show 只是简单地切换元素的 CSS 属性 display。

二、编译条件： v-if 是惰性的：若是在初始渲染时条件为假，则什么也不作。直 到条件第一次变为真时，才会开始渲染条件块。v-show 无论初始条件是什么， 元素老是会被渲染，而且只是简单地基于 CSS 进行切换。

三、性能消耗： v-if 有更高的切换消耗。v-show 有更高的初始渲染消耗。

四、应用场景： v-if 适合运行时条件不多改变时使用。v-show 适合频繁切换。

vue 中子组件调用父组件的方法

经过 v-on 监听 和emit'触发 当前实例上的 自定义事件。 示例： 父组件：

<template>
 <div class="fatherPageWrap">  <h1>这是父组件</h1> <!-- 引入子组件，v-on 监听自定义事件 -->  <emitChild v-on:emitMethods="fatherMethod"></emitChild>  </div> </template> <script type="text/javascript"> import emitChild from '@/page/children/emitChild.vue'; export default{  data () {  return {}  },  components : {  emitChild  },  methods : {  fatherMethod(params){  alert(JSON.stringify(params));  }  } }</script>  子组件： <template>  <div class="childPageWrap">  <h1>这是子组件</h1>  </div> </template> <script type="text/javascript"> export default{  data () {  return {}  },  mounted () {  //经过 emit 触发  this.$emit('emitMethods',{"name" : 123});  } }</script> 结果： 子组件 会调用 父组件的 fatherMethod 方法，该而且会 alert 传递过去的参 数：{"name":123} 复制代码

axios 有哪些特色？

一、Axios 是一个基于 promise 的 HTTP 库，支持 promise 全部的 API

二、它能够拦截请求和响应

三、它能够转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON 类 型的数据

四、安全性更高，客户端支持防护 XSRF