不會吧！都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