面试官一问一答式的前端面试题
1，请问你平常用什么浏览器调试？
谷歌,火狐 ，偶尔调试的时候用IE 偶尔会使用下国产的浏览器
问:请说下火狐浏览器,360的浏览器的内核 没听错就是360浏览器
IE浏览器内核：Trident内核，也是俗称的IE内核；
Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
Firefox浏览器内核：Gecko内核，俗称Firefox内核；
Safari浏览器内核：Webkit内核；
Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
360浏览器、猎豹浏览器内核：IE+Chrome双内核；
搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
百度浏览器、世界之窗内核：IE内核；
2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；
2.请让一个div居于屏幕中间,并且让里面的p元素文本相对于div元素 水平和垂直居中 ？听完心里有点懵逼
直接说答案了 面试官想听下面这个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>让DIV标签中的P标签水平和垂直都居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.parent {
display: table;
width: 300px;
height: 300px;
text-align: center;
position: absolute;
left:50%;
top:50%;
margin-top:-150px;
margin-left:-150px;
}
.son {
display: table-cell;
height: 200px;
background-color: yellow;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<p class="son">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tempore deleniti quos perferendis corporis ab accusamus, magni quibusdam, tempora ea!</p>
</div>
</body>
很多童鞋可能没听说过 display:table 和 display:table-cell 的配合 就能实现 这个问题把我问住了 我以为这已经算是很难的题了 专门问一些很少使用的样式
3.你用过哪些预处理的css语言 我回答scss 那好 你简历上说你用过mint-ui组件 那你说下 怎么解决样式穿透的问题
听完我又懵逼 心里难受 我也是第一次听 样式穿透
面试官的本意是这个:
vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。
但有些Sass 之类的预处理器无法正确解析 >>>，（此时） 可以使用 /deep/ 操作符( >>> 的别名)
<style scoped>
（方法一：）（有些情况可能会无效，比如我现在，哈哈哈）
外层 >>> 第三方组件 {
样式
}
（方法二：）
/deep/ 第三方组件 {
样式
}
</style>
ps:
1、/deep/与class名之间有无空格都可。
2、也可写成： .audit /deep/ .el-radio-button_inner{ color:red } ——前面加class + /deep/ + 三方clss名 (格式）
4.你以为这样就结束了 其实 只是开始 心里越来越难受
vue-router可以回退吗 ?回退之后参数导致数据丢失怎么处理,你使用那种方式缓存 ！我们不能一直让用户刷新界面吧
听完 我那是来面试的 我是来锻炼心里承受能力的
首先对刷新参数消失想到的方法是在刚开始的时候将参数存到localStorage里面，但是如果这种传参比较多的话可能存储的地方会有点多；
然后再看一些博客的时候提到用vue 的<keep-alive>，即在<router-view>外套一层<keep-alive>实现页面缓存，但是这样确实是不是每一个页面都需要缓存的特别是一些状态之间切换需要流程化更改状态的页面，写上这个就不能实现数据的实时刷新了
也可以使用那个方法 监听 在回退的那个界面 监听 使用watch()监视 $route的变化 定义一个方法获取数据
注意! 注意! 注意! 重要的事说三遍, 接受参数时,这里是 重点 这里是 $route 取参数 不是$router重要的事情说三遍
然后params对应通过params接受,query通过query接受
5.请说出 vuex中的几个方法以及使用 终于到我会的了
var store=new Vue.Store({
//用户自定义的变量和值都放在state对象里面
state:{
count:10 // 用户自定义的变量:值
}，
//获取用户定义的数据（注意,获取vuex共享数据只能通过函数获取）
getters:{
//用户自定义函数,参数是state是固定的不要修改
getCount(state){
return state.count;
}，
//修改vuex中的共享数据
mutations:{
//用户自定义函数
subCount(state){
state.count--;
},
clear(state){
state.count=0;
}
},
//异步修改数据,有些数据 我们并不要立即修改
actions:{
modifyCount(context){
//context指的是 $store对象 调用mutations中的方法来实现异步修改数据
setTimeout(()=>{
context.commit("clear"); //调用了 mutations对象中的clear
},3000)//用定时器模拟异步修改
}
}
});
直接在<template></template>中使用 是{{$store.getters.getCount}} 注意后面不要加括号
修改共享数据中的数据是 :this.$store.commit("subCount"); 提交subCount方法 this.$store.commit("clear") 你可以在 组件中的methods中使用 也可以在watch 中也可以使用
6.请说出es6中常用的数组方法
forEach() 、map()、filter()、reduce()、some()、every()
请说出 some和every的区别
some
/遍历数组每一项，有一项返回true,则停止遍历，结果返回true。不改变原数组every:
遍历数组每一项，每一项返回true,则最终结果为true。当任何一项返回false时，停止遍历，返回false。不改变原数组7.请说出你在vue中觉得哪些是比较重要的东西！
我回答的是双向绑定 单页面操作 虚拟dom树
最后聊了些其他的 就让我走了 虽然很多回答不上来 但也是知道了 一些新东西 还是学到了 ，笑笑就过去了 说明自己还是有很多要学习的东西 给自己加油下 哈哈
上一篇： 你的项目乱码了吗？
下一篇： highcharts 内存泄露的解决