因为对 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 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁