前端面试之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属性是，调用的实际上是缓存。

可能我不太擅长总结，你们有什么好的看法能够发表哦，谢谢！