前端面試彙總(VUE)

由於對vue用的比較多，因此面試投的都是vue相關的崗位，下面是在面試中遇到的常見的vue問題。

1.Vue 不一樣環境配置不一樣的接口地址；

咱們在項目中，前端請求訪問的地址若是有跨域，咱們會在config-->index.js中配置代理。

這樣前端請求就可使用'/api/接口名稱'，可是在生產環境下，咱們不須要接口請求前面加'/api'，因此就須要判斷開發環境和生產環境。
1)
    config -> dev.env.js  添加開發接口地址
    config -> prod.env.js  添加生產環境的地址
2)
    在封裝axios時，添加判斷：
    if (location.hostname == '正式的域名') { 
        baseUrl = '正式地址'
    } else { //測試環境
        baseUrl = '測試地址'
    }

    axios.defaults.baseURL = baseUrl

2.用戶未登陸進入該url的登陸攔截邏輯：

1.首先在定義路由的時候須要添加自定義字段(requireAuth)字段能夠本身設置名稱，判斷該路由的訪問是否須要登陸，若是用戶已經登陸，順利進入該路由，不然就進入登陸頁。在路由管理頁面添加meta，在meta字段裏設置。
    meta:{requireAuth:true}// 添加該字段，true表示進入這個路由是須要登陸的
2.定義完路由後，利用vue-router的鉤子函數beforeEach對路由進行判斷；
router.beforeEach((to, from, next) => { 
    if (to.meta.requireAuth) { // 判斷該路由是否須要登陸權限 
        if (store.state.token) { // 經過vuex state獲取當前的token是否存在 
            next();
        } else { 
            next({ 
                path: '/login', 
                query: {
                    redirect: to.fullPath
                } // 將跳轉的路由path做爲參數，登陸成功後跳轉到該路由 
            }) 
        } 
        } else { 
            next(); 
        }
   })

3.axios是什麼？怎麼使用？

axios是一個基於promise的HTTP請求庫，簡單地說就是能夠發送get、post請求，能夠用在瀏覽器和node.js中。
axios的特性：
    1)能夠在瀏覽器中發送XMLHttpRequests
    2)能夠在node.js中發送http請求
    3)支持Promise API
    4)攔截請求和響應
    5)轉換請求數據和響應數據
    6)可以取消請求
    7)自動轉換json數據
    8)客戶端支持保護安全免受 XSRF 攻擊

4.VueX是什麼？哪一種場景能使用它？

1）VueX是一個專門爲vue構建的狀態集管理。主要爲了解決組件之間狀態共享的問題。強調的是集中式管理。主要是便於維護、便於解耦，不是全部項目都適合vuex，若是不是構建大型項目，會使代碼變得繁瑣多餘。
2)VueX的核心
    state：存放數據
    mutations：變動狀態（同步的）
    getters：
    actions：調用mutations，更改狀態的。（能夠異步）
    modules

5.路由的鉤子函數

路由的鉤子函數主要是用來攔截導航，讓它完成跳轉和取消
主要分爲全局和局部
全局的：
    1）beferEach
    2）afetrEach

6.vue的生命週期詳解（必看）

vue生命週期分爲四個階段
creating
mounting
updating
destroying

beforeCreated：el和data都未初始化（能夠加loading）
Created：data數據初始化，el未初始化（結束loading）
beforeMount：完成el和data初始化（虛擬DOM）
mounted：掛載完成，真實DOM渲染完成（發起請求，拿數據，渲染DOM）
beforeUpdate：組件更新前的函數，數據更新了，可是，vue（組件）對象對應的dom中的內部（innerHTML）沒有變，因此叫做組件更新前
update：組件更新以後執行的函數，vue（組件）對象對應的dom中的內部（innerHTML）改變了，因此，叫做組件更新以後
beforeDestroy：組件銷燬以前調用，在這一步，實例仍然能夠徹底可用（可在此處清除定時器，清除事件綁定）
destroyed：Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬