前端面試之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屬性是，調用的實際上是緩存。

可能我不太擅長總結，你們有什麼好的看法能夠發表哦，謝謝！