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