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

















   
    
    
    
    
    
    
    
    
    

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理