摘要：因為對用的比較多，所以面試投的都是相關的崗位，下面是在面試中遇到的常見的問題。這樣前端請求就可以使用接口名稱，但是在生產環境下，我們不需要接口請求前面加，所以就需要判斷開發環境和生產環境。的核心存放數據變更狀態同步的調用，更改狀態的。

因為對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 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀

7.路由懶加載

1)vue異步組件技術,vue-router配置路由，使用路由的異步組件技術，可以實現按需加載。但是這種情況下，一個組件生成一個js文件。
{
    path:"/home",
    name:"home".
    component:resolve => require(["@/components/home"],resolve)
}
2)路由懶加載（使用import）
const Foo = () => import(/* webpackChunkName: "group-foo" */ "./Foo.vue")
{
    path:"/home",
    name:"home".
    component:Foo
}

在build目錄下找到webpack.prod.conf.js文件，將output修改為
output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath("js/[name].[chunkhash].js"),//文件格式，文件名.文件哈希
    chunkFilename: utils.assetsPath("js/[name].[chunkhash].js")//文件切割后的文件名稱。
    這里的name對應的就是路由中引入文件時候的webpackChunkName
}
3)webpack提供的require.ensure技術，也可以按需加載，多個路由指定相同的chunkName，會合并打包成一個js文件。
{
    path:"/home",
    name:"home".
    component:resolve=>require.ensure([],() => resolve(require("../components/PromiseDemo")),home)
}

8.封裝組件過程

1）新建組件，組件包含template、script、style
2）父組件中，使用import引入組件 import 組建名稱 form 組件路徑
3）父組件中，components注冊組件 components：{ 組件名稱 }

9.vue路由傳參方式

1）getDescribe(id){
    this.$router.push({
        path:"/describe/${id}"
    })
}
對應的路由配置：
{
 path: "/describe/:id",
 name: "Describe",
 component: Describe
}
獲取參數：this.$route.params.id;

2)getDescribe(id){
    this.$router.push({
        name:"/describe",
        params:{
            id:id
        }
    })
}
獲取參數：this.$route.params.id

3)getDescribe(id){
    this.$router.push({
        path:"/describe",
        query:{
            id:id
        }
    })
}
獲取參數：this.$route.query.id;    //query方式參數會顯示在url的后面

10.插槽的作用？

**匿名插槽：**
    子組件：
    
    父組件：
     
**渲染結果：**
    test-slot
    我是父組件里的文字，但是我要被放到子組件里

**多個插槽也叫具名插槽：**
子組件：
    
父組件：
    
**渲染結果：**
    多個具名插槽
    頭部內容
    內容部分
    底部內容

**作用域插槽：** 
作用域插槽是一種特殊類型的插槽，子組件的值傳到父組件使用
子組件：
    子組件props里接收一個父組件傳遞的數組，在作用域插槽slot里邊，綁定數組的屬性。
    

    

父組件：
    在test-slot子組件標簽上通過:item="items"給子組件傳遞數組，通過slot-scope="props"獲取子組件作用域插槽所有的屬性值
    
    
    
**渲染結果：**
zhangsan un 18