vue前端面试题总结

1.简述css中的盒子模型，标准盒子模型和IE盒子模型

  通常情况下，盒子模型指的是标准盒子模型：盒子模型将元素实际占用的面积划分为：margin(外边距)+padding(内边距)+border(框)+content(内容)，其中内容占据的面积是实际占据的面积，内外边距和框是对内容修饰的累加的过程。

而IE中的盒子模型可以描述为：整个盒子占有的面积是一定的，其中内外边距、框、内容分别占用空间需要分配。

2.vue中的路由拦截

路由拦截是项目中对用户登录身份的认证后确定用户权限的一种形式，如rouer.beforeEach全局钩子函数是对全局的路由进行过滤。

常见的是：我们登录一个网站，一般情况下没有注册网站用户的情况下，我们也能访问该网站的首页。

但是，当涉及到类似添加购物车、喜爱、分享操作的时候，网站时需要获取用户信息的。这时候如果用户没有登录，点击查看购物车等后续功能将会中断，点击进入购物车的操作将会跳转到用户登录或注册页面去拉取用户信息！只有用户信息被读取到，才会放行后续的路由权限！

3.sessionstorage，cookie，localstorage的区别

    localstorage相比较sessionstorage会永久存放在浏览器中，除非主动删除。

   sessionstorage存放的数据在关闭当前窗口之后就会被自动清除，存放在服务器上，不容易被窃取，但会占用一定的服务器资源。

Web Storage的概念和cookie相似，区别是Web Storage是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie等方法。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

4.vue项目中，用户登录后的token存放在什么位置？

在做登录功能的时候相比较其他项目功能，有些需要注意的地方，就是，存放在vuex里的用户数据，名称、头像、等级等，

在用户首次进行登录操作的时候，前端将用户输入的用户名和密码传递给后端的小伙伴儿，

后端返回前端一个token(我们项目是使用jwt生成的)，

前端将token存放在store中的token里，同时将其存放在session或local storage里面，避免用户刷新页面后store数据被重置！我们同时将token存放在cookie和session里面，理由后续再说。

前端将后端传递过来的token通过调用后端接口(利用token获取用户信息)将token作为参数传入，将获取到用户的数据存放在store中

5.v-if和v-show的应用场景

  v-if是操作DOM树来控制元素的隐藏和显示，v-show是为元素添加display:none/block隐藏/显示元素;

  v-if有局部组件编译/卸载的过程,v-show只是切换CSS样式的过程；

  v-if是惰性的：如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

  v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

所以，元素需要被频繁切换时，使用v-show;如果运行条件很少时，使用v-if

6.vue-router实现路由懒加载

 路由懒加载是解决首页刷新慢的问题，使用懒加载可以将页面进行划分，在用户请求的时候加载该页面。

export default new Router({
   routes:[
      path:"/Login",
      name:"Login",
      component:()=>{import('@/views/Login.vue')}
   ]
})

7.数组去重

 1).原生去重：创建新的空对象obj，遍历数组中的元素，以强行访问的方式访问空对象obj,并为其赋值为1，遍历对象，将其属性放入数组

var arr=[1,2,2,1,5,2,6,45,21,"a","d","a"];
var obj={};
for(var i=0;i<arr.length;i++){
  obj[arr[i]]=1;
}
console.log(obj);//输出{1: 1, 2: 1, 5: 1, 6: 1, 21: 1, 45: 1}

var arr1=[];
for(var k in obj){
 arr1.push(k)
}
console.log(arr1)

 2).set去重：ES6提供了新的数据结构Set,类似于数组，但成员的值是唯一的

let arr=[1,3,4,1,5,6,8,4,5];
let unique=[...new Set(arr)];
console.log(unique);//[1, 3, 4, 5, 6, 8]

8.vue实现双向数据绑定的原理

采用数据劫持结合“发布者-订阅者”模式的方式，通过Object.defineProperty()来劫持各个属性的setter/getter，在数据变动时，发布消息给订阅者，触发相应的监听回调。

 9.怎样在chrome支持最小字体的基础上缩小字体到10px？

 将HTML中的基础字体设置为20px,利用transform:scale(0.5,0.5)，将字体变小

10.父子组件中生命周期函数怎么执行？

详情：https://www.jb51.net/article/145474.htm

在父组件执行到beforeMounte钩子函数的时候，开始进入子组件的beforeCreate()/created(),beforeMount阶段后，执行的是Mounted阶段，该阶段时子组件已经挂载到父组件上，并且父组件随之挂载到页面中。

加载渲染过程：

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

子组件更新过程：

父beforeUpdate->子beforeUpdate->子updated->父updated

销毁过程：

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

11.数组排序的方法

 1).冒泡排序

var arr=[32,43,132,12,10,34,11,5,8,78];
for(var i=0;i<arr.length-1;i++){//外层循环，控制循环次数 
    for(var j=0;j<arr.length-1-i;j++){
        if(arr[j]>arr[j+1]){
            var temp=arr[j];
            arr[j]=arr[j+1];
            arr[j+1]=temp;
        }
    }
}
console.log(arr);//[5, 8, 10, 11, 12, 32, 34, 43, 78, 132]

 2).数组sort排序

var arr=[32,43,132,12,10,34,11,5,8,78];
//需要注意的是，这里的箭头函数写法，在返回值只有一句话觉得时候，务必省略{}
console.log(arr.sort((a,b)=>a-b));//[5, 8, 10, 11, 12, 32, 34, 43, 78, 132]

12.data为什么要用return来返回？

　　没考虑过这个问题，查资料有简书一篇说的有点道理，不仅时数据污染，怎么会造成数据污染的？可以点击这里看原文

　　其实是在Vue.mixin方法里面，有一个mergeOption的方法，在合并option的时候，或有策略模式，也就是strategy，这个strategy上有很多策略的方法，其中就有data，在合并父子的data数据时，如果不是function数据返回保证唯一，那么data可能就会混乱，因为多子级之间可能共用了一个父级的data，如果此时data不是唯一的，那么很有可能数据混乱。

13.vue的路由模式

　　模式指的是：hash(加#)和history(不加#)两种，

实际上存在三种模式：

　　Hash: 使用URL的hash值来作为路由。支持所有浏览器。

　　History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式

　　Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。

14.扩展组件

　　扩展组件的方法有vue.mixins、extends、和插槽slot。

　　mixins相当于一个独立出组件的script内容，包含可以被引用的data、methods等，组件引用mixins是在script引入改抛出的文件，export default里添加mixins:['引入的mixin名称'],然后其中的data等都会与引入的组件合并

　　extends是扩展实例构造器，相当于动态添加元素，可以参考this.$toast的使用与封装

15.路由钩子

路由钩子包括：全局钩子、单个路由钩子和组件内钩子

全局钩子用法可以参考：权限通过方可访问的页面，否则跳转到登录页面的过程

组件内钩子在项目中使用较多，比如beforeRouteEntereforeRouteLeave之类的，获取进入当前组件的带参条件用以判断来执行某些行为。

单个组件钩子是针对某个路由地址进行的操作