前端面试之vue相关的面试题

hello，你们的小可爱，皮皮聪又来发表感想了。

首先简单概括下会遇到的问题：

1.vuex作用

①vuex是一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化。

②vue中的多个组件之间的通讯，不同组件的行为需要变更同一状态。虽然我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，这些模式比较脆弱，通常会导致无法维护代码，此时就可以用vuex.

2.vue生命周期

①vue的生命周期主要分为beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy,destroyed

②这里就不给大家截原理图啦，上代码自己感受下就好了（不接受反驳，哈哈）

③上代码

 beforeCreate() {
    console.group('------beforeCreate创建前状态------');
    console.log('%c%s', 'color:red' , 'el     : ' + this.$el); 
    //undefined
    console.log('%c%s', 'color:red',  'data   : ' + this.$data); 
   //undefined
    console.log('%c%s', 'color:red',  'message: ' + this.message)
  },
  created() {
    console.group('------created创建完毕状态------');
    console.log('%c%s', 'color:red', 'el     : ' + this.$el); 
    //undefined
    console.log('%c%s', 'color:red', 'data   : ' + this.$data); 
    //已被初始化
    console.log('%c%s', 'color:red', 'message: ' + this.message); 
    //已被初始化
  },
  beforeMount() {
    console.group('------beforeMount挂载前状态------');
    console.log('%c%s', 'color:red', 'el     : ' + (this.$el)); 
    //已被初始化
    console.log(this.$el);
    console.log('%c%s', 'color:red', 'data   : ' + this.$data);
    //已被初始化
    console.log('%c%s', 'color:red', 'message: ' + this.message); 
    //已被初始化
  },
  mounted() {
    console.group('------mounted 挂载结束状态------');
    console.log('%c%s', 'color:red', 'el     : ' + this.$el); 
     //已被初始化
    console.log(this.$el);
    console.log('%c%s', 'color:red', 'data   : ' + this.$data); 
    //已被初始化
    console.log('%c%s', 'color:red', 'message: ' + this.message); 
    //已被初始化
  },
  beforeUpdate() {
    console.group('beforeUpdate 更新前状态===============》');
    console.log('%c%s', 'color:red', 'el     : ' + this.$el);
    console.log(this.$el);
    console.log('%c%s', 'color:red', 'data   : ' + this.$data);
    console.log('%c%s', 'color:red', 'message: ' + this.message);
  },
  updated() {
    console.group('updated 更新完成状态===============》');
    console.log('%c%s', 'color:red','el     : ' + this.$el);
    console.log(this.$el);
    console.log('%c%s', 'color:red', 'data   : ' + this.$data);
    console.log('%c%s', 'color:red', 'message: ' + this.message);
  },
  beforeDestroy() {
    console.group('beforeDestroy 销毁前状态===============》');
    console.log('%c%s', 'color:red', 'el     : ' + this.$el);
    console.log(this.$el);
    console.log('%c%s', 'color:red', 'data   : ' + this.$data);
    console.log('%c%s', 'color:red', 'message: ' + this.message);
  },
  destroyed() {
    console.group('destroyed 销毁完成状态===============》');
    console.log('%c%s', 'color:red', 'el     : ' + this.$el);
    console.log(this.$el);
    console.log('%c%s', 'color:red', 'data   : ' + this.$data);
    console.log('%c%s', 'color:red', 'message: ' + this.message)
  }

运行的结果截图:

3.axios+vue实现登入拦截

①路由拦截，需要在定义路由的时候添加一个字段requireAuth，用于判断该路由的访问是否需要登入，如果用户已经登入，则可以跳转到路由，否则就进入到登入页面，登入成功后跳转到目标路由。

②定义完路由之后，我们通过vue-router提供的钩子函数beforeEach()对路由进行判断，代码如下：

router.beforeEach((to,from,next) => {
   if(to.meta.requireAuth){ //判断该路由是否需要登入权限
       if(!store.state.token){ //通过vuex state获取当前的token是否存在
              router.push('/login');//不存在则跳转到登入页面
        }
         next();//进行下一个钩子
    }      
});

③如果当token失效了，但是token依然保存在本地。这时候你去访问需要登入权限的路由时，实际上需要让用户重新登入，这时候就需要结合http拦截器+后端接口返回的http状态码来判断，axios拦截器分为两种，见下代码：

axios.interceptors.request.use(
   (config) => {
// 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的 header都加上token，不用每次请求都手动添加了
         if(store.state.token){
            config.headers.token = store.state.token;
         }
         return config;
    },
     (error) => {
       return Promise.reject(error);
});

http response拦截器

axios.interceptors.response.use(
     (response) => { //用来判断响应状态
        return response；
        //return Promise.resolve(response);
     },
     (error) => {
       return Promise.reject(error);
     }
)

可能我这里说的不是很清楚，大家可以看看这篇博客详细教程

4.vue原理

1.1vue的两个核心是数据驱动（双向绑定）和组件系统

1.2vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和存储器属性：getters和setter(只兼容I E9以上的版本)，可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。

1.3vue组件的核心选项

①模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系

②初始数据（data）：一个组件的初始数据状态。对于复用的组件来说，这通常是私有状态

③接受的外部参数（props）：组件之间通过参数来进行数据的传递和共享

④方法（methods）：对数据的改动操作一般都在组件的方法内进行

⑤生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大

⑥私有资源（assets）:vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和其他的子组件可以调用。

5.webpack

1.1什么是webpack

①打包：可以把多个JavaScript文件打包成一个文件，减少服务器压力和下载宽带

②转换：把扩展语言转换成为普通的JavaScript，让浏览器顺利运行。

③优化：肩负起了优化和提升性能的责任

1.2webpack优势

①模块化开发（import，require引入）

②预处理（less,sass,es6,typeScrpt...）

③主流框架脚手架支持（vue react angular）

④庞大的社区（资源丰富，降低学习成本）

6.vue-router实现原理

1.1hash模式

vue-router默认是hash模式，使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载

1.2history模式

如果不想要很丑的hash，我们可以用路由的history模式，这种模式充分利用history。pushStateAPI来完成URL跳转而无需重新加载页面，不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页面客户端应用，如果后台没有正确的配置，当用户在浏览器直接范文URL就会返回404.这几不好看了，所以要在服务端增加一个覆盖所有情况的候选资源，如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你app依赖的页面

1.3两种模式的比较

①pushState设置新的URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL

②pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中，而hash设置的新值必须与原来不一样才会触发记录添加到栈中

③pushState通过stateObject可以添加任意类型的数据到记录中，而hash只可添加短字符串

④pushState可额外设置title属性供后续提供使用

1.4vue-router实现动态加载路由组件（懒加载）

①在router.js里面引入异步组件 const index = () => import('../page/list/index.vue')

②在router.js中直接配置使用引入的vue文件 routes:[{path:'/index',component:index,name:'index'}]

③在build、webpack.base.conf,js下的output属性，新增chunkFilename.

output:{

　　path:config.build.assetsRoot,

　　filename:'[name].js',

　　chunkFilename:'[name].js',

　　publicPath:process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath

}

7.vue1.0和vue2.0的区别，更喜欢哪个版本，为什么？

1.1vue2.0不再支持片段代码，vue2.0必须只有一个根节点，也就是唯一的父节点

1.2vue2.0组件必须注册

1.3生命周期不同

vue1.0生命周期：

init//组件刚刚被创建，但Data、method等属性还没被计算出来

created //组件创建已经完成，但DOM还没有被生成出来

beforeCompile //模板编译之前

compiled //模板编译之后

ready //组件准备

attached //在vm.$set插入到DOM时调用

detached//在vm.$el从DOM中删除时调用

beforeDestroy//组件销毁之前

destroyed//组件销毁之后

vue2.0生命周期:

beforeCreate//组件实例刚刚被创建，属性都没有

created//实例已经创建完成，属性已经绑定

beforeMount//模板编译之前

mounted//模板编译之前

beforeUpdate//组件更新之前

updated//组件更新完毕

beforeDestroy//组件销毁前

destroyed//组件销毁后

1.4for循环遍历数组、对象时的参数顺序的变更，遍历数组之前是（index，value），现在是（value，index）；对象的之前是（key,value）,现在是（value，key）移除了$index和$key两个隐式声明变量，以便在v-for中显示声明，之前的track-by已经替换成为key来替代

1.5$dispatch和$broadcast替换，可使用vuex

1.6vue2.0将vue1.0所有自带的过滤器都删除了，也就是说，在2.0中，要使用过滤器就得我们自定义一个过滤器，如：

Vue.filter(''doSomething",function(n,a,b){

　　return n<10?n=a+b:n;

});

8.computed和watch的原理

1.1通过watch的方法，监听被改变的变量，然后再watch的那个变量命名的函数中去对我们要修改的值进行重新的赋值，或者是触发一次更新。watch的执行类似于emit与on这种触发方式，通过vue的watch实例监听值来自动触发一个函数的执行。

1.2computed监听变量，通过return一个新的变量的方式来更新一个变量的数据，computed函数的执行最快，在HTML渲染开始就已经执行了

1.3应用场景

①watch的触发消耗大，每次数据的改变就要触发一次函数的执行，这不太友好。

②computed在改变一个变量时，和data对象里的数据属性是同一类的。返回的值直接就修改掉了原来的值，最大的优点在于简洁、代码少当多次调用computed属性是，调用的其实是缓存。

可能我不太擅长总结，大家有什么好的见解可以发表哦，谢谢！

posted on 2019-03-01 16:57 皮皮聪阅读(1946) 评论(0) 编辑收藏举报

刷新页面返回顶部

前端面试之vue相关的面试题

导航