前端面试汇总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 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

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