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