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样式的过程；

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来返回？