前端面試之vue相關的面試題

hello，你們的小可愛，皮皮聰又來發表感想了。

首先簡單概括下會遇到的問題：

1.vuex作用

①vuex是一個狀態管理的插件，可以解決不同組件之間的數據共享和數據持久化。

②vue中的多個組件之間的通訊，不同組件的行為需要變更同一狀態。雖然我們經常會采用父子組件直接引用或者通過事件來變更和同         步狀態的多份拷貝，這些模式比較脆弱，通常會導致無法維護代碼，此時就可以用vuex.

2.vue生命周期

①vue的生命周期主要分為beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy,destroyed

②這里就不給大家截原理圖啦，上代碼自己感受下就好了（不接受反駁，哈哈）

③上代碼

 beforeCreate() {
    console.group('------beforeCreate創建前狀態------');
    console.log('%c%s', 'color:red' , 'el     : ' + this.$el); 
    //undefined
    console.log('%c%s', 'color:red',  'data   : ' + this.$data); 
   //undefined
    console.log('%c%s', 'color:red',  'message: ' + this.message)
  },
  created() {
    console.group('------created創建完畢狀態------');
    console.log('%c%s', 'color:red', 'el     : ' + this.$el); 
    //undefined
    console.log('%c%s', 'color:red', 'data   : ' + this.$data); 
    //已被初始化
    console.log('%c%s', 'color:red', 'message: ' + this.message); 
    //已被初始化
  },
  beforeMount() {
    console.group('------beforeMount掛載前狀態------');
    console.log('%c%s', 'color:red', 'el     : ' + (this.$el)); 
    //已被初始化
    console.log(this.$el);
    console.log('%c%s', 'color:red', 'data   : ' + this.$data);
    //已被初始化
    console.log('%c%s', 'color:red', 'message: ' + this.message); 
    //已被初始化
  },
  mounted() {
    console.group('------mounted 掛載結束狀態------');
    console.log('%c%s', 'color:red', 'el     : ' + this.$el); 
     //已被初始化
    console.log(this.$el);
    console.log('%c%s', 'color:red', 'data   : ' + this.$data); 
    //已被初始化
    console.log('%c%s', 'color:red', 'message: ' + this.message); 
    //已被初始化
  },
  beforeUpdate() {
    console.group('beforeUpdate 更新前狀態===============》');
    console.log('%c%s', 'color:red', 'el     : ' + this.$el);
    console.log(this.$el);
    console.log('%c%s', 'color:red', 'data   : ' + this.$data);
    console.log('%c%s', 'color:red', 'message: ' + this.message);
  },
  updated() {
    console.group('updated 更新完成狀態===============》');
    console.log('%c%s', 'color:red','el     : ' + this.$el);
    console.log(this.$el);
    console.log('%c%s', 'color:red', 'data   : ' + this.$data);
    console.log('%c%s', 'color:red', 'message: ' + this.message);
  },
  beforeDestroy() {
    console.group('beforeDestroy 銷毀前狀態===============》');
    console.log('%c%s', 'color:red', 'el     : ' + this.$el);
    console.log(this.$el);
    console.log('%c%s', 'color:red', 'data   : ' + this.$data);
    console.log('%c%s', 'color:red', 'message: ' + this.message);
  },
  destroyed() {
    console.group('destroyed 銷毀完成狀態===============》');
    console.log('%c%s', 'color:red', 'el     : ' + this.$el);
    console.log(this.$el);
    console.log('%c%s', 'color:red', 'data   : ' + this.$data);
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  }

運行的結果截圖:

3.axios+vue實現登入攔截

①路由攔截，需要在定義路由的時候添加一個字段requireAuth，用於判斷該路由的訪問是否需要登入，如果用戶已經登入，則可以跳        轉到路由，否則就進入到登入頁面，登入成功后跳轉到目標路由。

②定義完路由之后，我們通過vue-router提供的鈎子函數beforeEach()對路由進行判斷，代碼如下：

router.beforeEach((to,from,next) => {
   if(to.meta.requireAuth){ //判斷該路由是否需要登入權限
       if(!store.state.token){ //通過vuex state獲取當前的token是否存在
              router.push('/login');//不存在則跳轉到登入頁面
        }
         next();//進行下一個鈎子
    }      
});        

③如果當token失效了，但是token依然保存在本地。這時候你去訪問需要登入權限的路由時，實際上需要讓用戶重新登入，這時候就        需要結合http攔截器+后端接口返回的http狀態碼來判斷，axios攔截器分為兩種，見下代碼：

axios.interceptors.request.use(
   (config) => {
// 每次發送請求之前判斷是否存在token，如果存在，則統一在http請求的 header都加上token，不用每次請求都手動添加了
         if(store.state.token){
            config.headers.token = store.state.token;
         }
         return config;
    },
     (error) => {
       return Promise.reject(error);
});    

http response攔截器

axios.interceptors.response.use(
     (response) => { //用來判斷響應狀態
        return response；
        //return Promise.resolve(response);
     },
     (error) => {
       return Promise.reject(error);
     }
)    

可能我這里說的不是很清楚，大家可以看看這篇博客詳細教程

4.vue原理

1.1vue的兩個核心是數據驅動（雙向綁定）和組件系統

1.2vue.js數據觀測原理在技術實現上，利用的是ES5Object.defineProperty和存儲器屬性：getters和setter(只兼容I           E9以上的版本)，可稱為基於依賴收集的觀測機制。核心是VM,即ViewModel,保證數據和視圖的一致性。

1.3vue組件的核心選項

①模板（template）：模板聲明了數據和最終展現給用戶的DOM之間的映射關系

②初始數據（data）：一個組件的初始數據狀態。對於復用的組件來說，這通常是私有狀態

③接受的外部參數（props）：組件之間通過參數來進行數據的傳遞和共享

④方法（methods）：對數據的改動操作一般都在組件的方法內進行

⑤生命周期鈎子函數（lifecycle hooks）：一個組件會觸發多個生命周期鈎子函數，最新2.0版本對於生命周期函數名      稱改動很大

⑥私有資源（assets）:vue.js當中將用戶自定義的指令、過濾器、組件等統稱為資源。一個組件可以聲明自己的私有      資源。私有資源只有該組件和其他的子組件可以調用。

5.webpack

1.1什么是webpack

①打包：可以把多個JavaScript文件打包成一個文件，減少服務器壓力和下載寬帶

②轉換：把擴展語言轉換成為普通的JavaScript，讓瀏覽器順利運行。

③優化：肩負起了優化和提升性能的責任

1.2webpack優勢

①模塊化開發（import，require引入）

②預處理（less,sass,es6,typeScrpt...）

③主流框架腳手架支持（vue react angular）

④龐大的社區（資源豐富，降低學習成本）

6.vue-router實現原理

1.1hash模式

vue-router默認是hash模式，使用URL的hash來模擬一個完整的URL，於是當URL改變時，頁面不會重新加載

1.2history模式

如果不想要很丑的hash，我們可以用路由的history模式，這種模式充分利用history。pushStateAPI來完成URL跳轉而無需重新加載頁面，不過這種模式要玩好，還需要后台配置支持。因為我們的應用是個單頁面客戶端應用，如果后台沒有正確的配置，當用戶在瀏覽器直接范文URL就會返回404.這幾不好看了，所以要在服務端增加一個覆蓋所有情況的候選資源，如果URL匹配不到任何靜態資源，則應該返回同一個index.html頁面，這個頁面就是你app依賴的頁面

1.3兩種模式的比較

①pushState設置新的URL可以是與當前URL同源的任意URL；而hash只可修改#后面的部分，故只可設置與當前同文檔的URL

②pushState設置的新URL可以與當前URL一模一樣，這樣也會把記錄添加到棧中，而hash設置的新值必須與原來不一樣才會觸發記錄      添加到棧中

③pushState通過stateObject可以添加任意類型的數據到記錄中，而hash只可添加短字符串

④pushState可額外設置title屬性供后續提供使用

1.4vue-router實現動態加載路由組件（懶加載）

①在router.js里面引入異步組件 const index = () => import('../page/list/index.vue')

②在router.js中直接配置使用引入的vue文件 routes:[{path:'/index',component:index,name:'index'}]

③在build、webpack.base.conf,js下的output屬性，新增chunkFilename.

output:{

　　path:config.build.assetsRoot,

　　filename:'[name].js',

　　chunkFilename:'[name].js',

　　publicPath:process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath

}

7.vue1.0和vue2.0的區別，更喜歡哪個版本，為什么？

1.1vue2.0不再支持片段代碼，vue2.0必須只有一個根節點，也就是唯一的父節點

1.2vue2.0組件必須注冊

1.3生命周期不同

vue1.0生命周期：

init//組件剛剛被創建，但Data、method等屬性還沒被計算出來

created //組件創建已經完成，但DOM還沒有被生成出來

beforeCompile //模板編譯之前

compiled //模板編譯之后

ready //組件准備

attached //在vm.$set插入到DOM時調用

detached//在vm.$el從DOM中刪除時調用

beforeDestroy//組件銷毀之前

destroyed//組件銷毀之后

vue2.0生命周期:

beforeCreate//組件實例剛剛被創建，屬性都沒有

created//實例已經創建完成，屬性已經綁定

beforeMount//模板編譯之前

mounted//模板編譯之前

beforeUpdate//組件更新之前

updated//組件更新完畢

beforeDestroy//組件銷毀前

destroyed//組件銷毀后

1.4for循環遍歷數組、對象時的參數順序的變更，遍歷數組之前是（index，value），現在是（value，index）；對象的之前是                   （key,value）,現在是（value，key）移除了$index和$key兩個隱式聲明變量，以便在v-for中顯示聲明，之前的track-by已經替換成         為key來替代

1.5$dispatch和$broadcast替換，可使用vuex

1.6vue2.0將vue1.0所有自帶的過濾器都刪除了，也就是說，在2.0中，要使用過濾器就得我們自定義一個過濾器，如：

Vue.filter(''doSomething",function(n,a,b){

　　return n<10?n=a+b:n;

});

8.computed和watch的原理

1.1通過watch的方法，監聽被改變的變量，然后再watch的那個變量命名的函數中去對我們要修改的值進行重新的賦值，或者是觸發一       次更新。watch的執行類似於emit與on這種觸發方式，通過vue的watch實例監聽值來自動觸發一個函數的執行。

1.2computed監聽變量，通過return一個新的變量的方式來更新一個變量的數據，computed函數的執行最快，在HTML渲染開始就已經       執行了

1.3應用場景

①watch的觸發消耗大，每次數據的改變就要觸發一次函數的執行，這不太友好。

②computed在改變一個變量時，和data對象里的數據屬性是同一類的。返回的值直接就修改掉了原來的值，最大的優點在於簡潔、代      碼少當多次調用computed屬性是，調用的其實是緩存。

可能我不太擅長總結，大家有什么好的見解可以發表哦，謝謝！