近几个月面试的经验，觉得被面试官问到的频率还蛮高，整理一下
目录
html篇
H5新特性
哪些HTML标签是块级元素、行内元素
知道盒子模型吗？
怪异盒子模型及两个的区别
flex布局
说说盒子如何垂直居中
使用flex弹性盒子
使用绝对定位position
使用transform
CSS样式优先级
js篇
js的基本数据类型
null,undefined的区别
引用数据类型
ES6新特性
作用域和作用域链
什么是闭包
闭包应用场景
闭包的优缺点
js数组常用方法
map和forEach的区别
判断数据类型的方法
判断是否为数组
数组去重方法
防抖和节流
箭头函数和普通函数的区别
call()、apply()和bind()有什么区别吗
浅拷贝和深拷贝
事件代理/委托是什么，用于什么场景
同步和异步的区别
什么情况下会造成内存泄漏？
cookie、sessionStorage、localStorage的区别（前端数据存储方式）
说一下从输入URL到页面加载完中间发生了什么？
get和post的区别
同源策略的理解
说一下什么情况下会产生跨域及产生跨域的解决方案
解决跨域：
Vue篇
说一下vue最大特点是什么或者说vue核心是什么
v-if和v-show的区别
vue常用的修饰符（部分公司会问）
vue组件中data为什么是函数
vue常用指令
vue如何自定义一个指令
vue的生命周期勾子函数有哪些
说一下vue双向数据绑定的原理
vue常用的几种组件通信方式
vue中key的作用
router和route的区别
vue-router路由跳转方式
computed(计算属性),watch(监视)的区别
vue如何让css样式只在当前组件生效
vuex是什么
vuex有哪几种属性
页面刷新后vuex的state数据丢失怎么解决？
vue-router常用的工作模式？hash模式和history模式区别？
html篇
H5新特性
1.video/audio视频/音频2.canvas 绘画3.geolocation 定位4.文件拖拽5.语义化标签 header footer section nav aside article
哪些HTML标签是块级元素、行内元素
行内元素：a b span img input select strong；块级元素：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
知道盒子模型吗？
盒子模型都是由四个部分组成的，分别是margin(外边距)、border(边框)、padding(内边距)和content(内容)。
怪异盒子模型及两个的区别
开启怪异盒子box-sizing :border-box;（不开启默认为普通盒子）区别：总宽度的计算公式不一样，开启样式不同。。。。。
flex布局
flex布局表示弹性布局，可以为盒状模型提供最大的灵活性。常用属性
flex-directio(设置容器主轴的方向)flex-wrap(设置当项目在容器中一行无法显示的时候如何处理)flew-flow(是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap)justify-content(设置项目在容器中的对齐方式)align-items(项目在交叉轴上如何对齐。)align-content(多根轴线的对齐方式)
说说盒子如何垂直居中
使用flex弹性盒子
使用绝对定位position
使用transform
就这些吧够了(其实我就知道这些0.0)
CSS样式优先级
！imporant内联样式(我叫行内样式)-----------------
ID选择器-----------------#id{...}类选择器-----------------.class{...}属性选择器----------------- input[type="text"]{...}伪类选择器-----------------a:hover{...}伪元素选择器-----------------p::before{...}标签选择器-----------------a{...}通配符选择器-----------------*{...}
js篇
js的基本数据类型
Number、String、Boolean、Null、undefined、Symbol
null,undefined的区别
null 表示一个变量没有值。
undefined 表示一个变量已经声明，但没有被赋给任何值
引用数据类型
Object、Array、Function
ES6新特性
let／const、includes、for of遍历、字符串拼接模板(`${...}`)、箭头函数、解构赋值
set对象、map集合、Promise、async/await、模块的导入(import)和导出(export default/export)
作用域和作用域链
全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）
在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
作用域链就是从当前作用域开始一层一层向上寻找某个变量，直到找到全局作用域还是没找到，就宣布放弃。这种一层一层的关系，就是作用域链。
什么是闭包
闭包就是能够读取其他函数内部变量的函数，通俗的讲就是函数a的内部函数b，被 函数a外部的一个变量引用的时候，就创建了一个闭包。
闭包应用场景
当我们需要在模块中定义一些变量，并希望这些变量一直保存在内存中但又不会 “污染” 全局的变量时，就可以用闭包来定义这个模块
最常见的是函数封装的时候，再就是在使用定时器的时候
闭包的优缺点
优点：让函数外部也可以访问到函数内的变量！内部函数有权访问外部函数作用域中的变量
缺点：使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等
解决内存泄漏： 简单的说就是把那些不需要的变量，但是垃圾回收又收不走的的那些赋值为null，然后让垃圾回收走
js数组常用方法
push() 将数据追加到数组的末尾 pop() 删除数组最后一个数据unshift() 将数据添加到数组的最前shift() 删除数组前一个数据reverse() 将数组反转splice() 删除数组中若干个数据，并选择是否插入新的数据sort() 将数组进行排序join() 将数组用链接符链接成为一个字符串concat() 将其他数组和数组拼接在一起变成新的数组slice() 截取数组中某些数据indexOf() 查找数据在数组的索引位置forEach() 遍历数组map() 映射数组some() 判断数组是不是有某一项满足条件
数组这块问的比较多
map和forEach的区别
相同点：都是循环数组数组中的每一项、只能遍历数组
不同点：forEach(): 没有返回值,改变原数组 map(): 有返回值,返回新的数组,原数组不变
判断数据类型的方法
基本数据类型使用typeof
引用类型可以使用Object.prototype.toString.call方法
判断是否为数组
Array.isArray
Object.prototype.toString.call()
数组去重方法
1.使用splice
2.ES6的set()方法
3.使用indexof
4.ES6中filter()过滤方法
防抖和节流
节流是指在一段时间内只允许函数执行一次。我们可以使用定时器实现节流
一般使用在input、keyup事件中
防抖的作用是，一个事件回调函数在一段时间后才执行，如果在这段时间内再次调用则重新计时。
一般使用在搜索框
箭头函数和普通函数的区别
箭头函数的this指向，定义箭头函数的上下文普通函数可以使用call修改this。但箭头函数不能用call、apply修改里面的this
call()、apply()和bind()有什么区别吗
apply 、 call 、bind都是用来改变this指向的。
all：接受一个上下文对象，参数列表，返回函数执行后的值。
apply：接受一个上下文对象，参数数组，返回函数执行后的值。
bind：接受一个上下文对象，参数列表，返回新函数。
浅拷贝和深拷贝
浅拷贝仅仅复制所考虑的对象，而不复制它所引用的对象
浅拷贝实现方法 Object.assign()
深拷贝把要复制的对象所引用的对象都复制了一遍。
深拷贝实现方法 JSON.parse(JSON.stringify())
事件代理/委托是什么，用于什么场景
事件代理是将事件监听函数加到父元素上，利用事件冒泡来处理多个子元素相同事件的方式。
因为在事件冒泡中，子元素的事件触发会冒泡到父元素中，触发父元素相同的事件。所以我们只需给父元素添加事件监听即可。
用于场景：不用给多个子元素添加事件监听函数，只给父元素添加。
同步和异步的区别
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去;
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
同步例子：一个人边追剧，一边吃饭，一边和朋友讨论剧情狗血，这就属于异步处理的方式
异步例子：异步和同步不同，说完话才能吃饭，吃完饭后才能看电视，上一件事做完才会继续下面的操作
什么情况下会造成内存泄漏？
1.闭包，上面闭包说了使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等
2.事件监听，对同一个事件重复监听，但是忘记移除，会导致内存泄露。
3.setInterval也可能会导致内存泄漏
4.全局变量
cookie、sessionStorage、localStorage的区别（前端数据存储方式）
1、localStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
2、sessionStorage 它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束(关闭页面或浏览器)时会被清除。
3、cookie保存在客户端，存储量限制在4KB，超长会被忽略，设置过期时间自动删除，前后端自动同步。
说一下从输入URL到页面加载完中间发生了什么？
DNS解析TCP链接(可能会被追问，了解一下TCP协议) 发送HTTP请求服务器处理请求并放回需要的数据浏览器解析渲染页面链接结束
输入了一个域名,域名要通过DNS解析找到这个域名对应的服务器地址(ip),通过TCP请求链接服务,通过WEB服务器(apache)返回数据,浏览器根据返回数据构建DOM树,通过css渲染引擎及js解析引擎将页面渲染出来,关闭tcp连接
get和post的区别
get请求时参数url处可见，post不会，比get更安全
post数据传输没有上限，get请求的数据大小不能超过2k
get请求具有数据缓存，post没有
同源策略的理解
协议、域名以及端口号相同就为同源，是由Netscape提出的一个著名的安全策略。
说一下什么情况下会产生跨域及产生跨域的解决方案
产生跨域的情况有：不同协议，不同域名，不同端口以及域名和ip地址的访问都会产生跨域。
解决跨域：
jsonp jsonp实现原理：主要是利用动态创建script标签请求后端接口地址，然后传递callback参数，后端接收callback，后端经过数据处理，返回callback函数调用的形式，callback中的参数就是json代理（前端代理和后端代理） 前端代理我在vue中主要是通过vue脚手架中的config中的index文件来配置的，其中有个proxyTable来配置跨域的 CORS 全称叫跨域资源共享，主要是通过服务端设置响应头来实现允许跨域的，可以设置请求来源主机，请求类型，头部各种属性等。
目前主流跨域基本上用代理和cors
Vue篇
说一下vue最大特点是什么或者说vue核心是什么
vue最大特点我感觉就是“组件化“和”数据驱动“
组件化就是可以将页面页面可复用的元素做成组件，写页面的过程，就是写组件，然后页面是由这些组件“拼接”起来的组件树
数据驱动就是让我们只关注数据层，只要数据变化，页面(即视图)会自动更新，至于如何操作dom，完全交由vue去完成咋们只关注数据，数据变了，也买你自动同步变化，很方便
v-if和v-show的区别
v-if和v-show都是可以显示隐藏一些元素，但还是有区别的
v-if可以做一些条件渲染false就不会加载对应元素，true才会动态添加对应元素，也就是节点操作，相当于创建元素和删除元素
v-show无论是false还是true都会加载元素，但为false时会用display：none隐藏在页面不显示，true时会显示在页面上显示其效果，不会操作dom节点，切换频繁推荐使用v-show！！（几乎每家都问）
vue常用的修饰符（部分公司会问）
v-on：指令常用修饰符：
.stop：禁止事件冒泡.prevent:阻止时间默认行为.once：只触发一次.nativ：监听组件根元素的原生事件
vue组件中data为什么是函数
因为一个组件是可以共享的，但他们的data是私有的，所以每个组件都要return一个新的data对象，返回一个唯一的对象，不要和其他组件共用一个
vue常用指令
v-on 是事件绑定v-model 是双向绑定v-once只渲染一次v-text innerText输出v-html innerHTML输出v-for 和原生JS的for循环差不多v-show 判断元素显示还是隐藏v-if是条件判断 有if当然有else 还有else ifv-else、v-else-if
vue如何自定义一个指令
有些面试官问道常用指令会继续追问，那么就需要知道自定义指令
自定义指令分全局和局部指令
局部：directives:{ }
全局：Vue.directive('指令名',{方法})
vue的生命周期勾子函数有哪些
四个阶段：创建，挂载，更新，销毁
创建前：beforCreate 创建后：created
挂载前：beforMount 挂载后：mounted
更新前：beforUpdate 更新后：updated
销毁前：beforDestroy 销毁后：destroyed
下面面试官追问几率较大！！
vue第一次加载的时候会执行那些勾子函数
1 创建vue实例之前 ： beforeCreate 2 创建vue实例之后 : created 3 挂载前 : beforeMount 4 挂载后(初始渲染) : mounted
vue常用勾子
1.create：data数据创建(适合较少请求，不然会导致首次页面加载时间过长)
2.mounted : 完成初始渲染 （一般用于操作dom）
vue父子组件生命周期执行顺序
父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
说一下vue双向数据绑定的原理
核心主要是利用ES5中的Object.definproperty()来劫持data里面各个属性的setter和getter钩子，在数据变动的时候，触发set方法，监测到数据发生变化，会发消息给订阅者，触发相应的监听回调，生成新的虚拟DOM树，再更新视图。
vue常用的几种组件通信方式
1.父子通信
在父组件中定义一个自定义属性，在子组件中通过props:{父组件自定义的属性名:{type,default}}
2.子父通信
在子组件定义一个自定义事件 @a=""，在父组件中触发事件 .emit('自定义事件',数据)
3.兄弟通信
创建一个空的vue并暴露出去，这个作为公共的bus,即当作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的bus，
在组件A中通过bus.$emit（’自定义事件名’，要发送的值）发送数据，
在组件B中通过bus.$on（‘自定义事件名‘,function(v) { //v即为要接收的值 }）接收数据
vue中key的作用
key的唯一性可以给每一个节点有一个唯一标识，比如id、手机号、身份证号、学号等唯一值,当添加或删除节点时,通过对比数据前后的变化,只用操作某个变化的节点,不需要重新渲染所有的数据,提高了性能，
主要意思：key的作用主要是为了高效的更新虚拟DOM。
router和route的区别
router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。
route相当于当前正在跳转的路由对象，可以从里面获取name,path,params,query等
vue-router路由跳转方式
1.声明式跳转
2.编程式跳转 this.$router.push({path:'/home'})
computed(计算属性),watch(监视)的区别
computed:多对一，支持缓存，只有依赖的数据发生了变化，才会重新计算。不支持异步
watch: 一对多，不支持缓存，数据变化时，它就会触发相应的操作。支持异步监听
面试官追问
watch怎么在第一次运行就调用方法?
mmediate：true。
watch怎么开启深度监视
deep:true。
vue如何让css样式只在当前组件生效
vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。
vuex有哪几种属性
state => 基本数据(数据源存放地) getters => 从基本数据派生出来的数据 mutations => 提交更改数据的方法，同步！ actions => 像一个装饰器，包裹mutations，使之可以异步。 modules => 模块化Vuex
页面刷新后vuex的state数据丢失怎么解决？
使用本地存储将数据放在localStorage 或者sessionStorage中
vue-router常用的工作模式？hash模式和history模式区别？
hash模式和history模式。
hash模式地址永远带着#号，它不会作为路径的一部分随着http请求，发给服务器，兼容性好。
history模式，访问路径直接拼接在端口号后面，后面的路径也会随着http请求发给服务器，地址干净，兼容性不如hash路由模式， 如果前端的 url 和后端发起请求的 url 不⼀致的话 , 会报404 错误 , 所以使⽤ history 模块的话我们需要和后端进⾏配合 .
.
推荐链接
您阅读本篇文章共花了：
发表评论