前言

这几天面试了几家公司，发现面试题基本相同整理了最近前段时间前端的面试题，以供大家参考

一、H5题

盒子模型 由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。

行内元素和块级元素有哪些 行内元素： a 、b、span、img、input 、select、strong等 块级元素： div、p、ul、ol、dl、dt、dd、h1、h2 、menu 、form等

svg和canvas的区别 svg 是一种使用 XML 描述 2D 图形的语言。 canvas 通过 JavaScript 来绘制 2D 图形。 svg 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 在 svg 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

h5的新特性 canvas,video&audio,新语义化块元素header, section, footer, aside, nav, main, article, figure,本地存储和新的表单控件，比如 calendar、date、time、email、url、search

二、 Vue题

组件通讯 父传子利用props 子传父利用on和emit

mvvm和mvc区别 mvvm是Model-View-ViewModel的缩写,mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

vue生命周期 分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后 beforeCreate created beforeMount mounted beforeupdated updated beforeDestroy destroyed

为什么vue组件中data必须是一个函数 如果 data 是一个对象，当修改data数据时，因为 data 都会指向同一个引用类型地址，其他重用的组件中的 data 也会被一并修改。当data 是一个返回对象的函数，因为每次重用组件时返回的都是一个新对象，引用地址不同，便不会出现如上问题

Vue 中 v-if 和 v-show 有什么区别？ v-if 的性能开销会比 v-show 大，切换频繁的标签更适合使用 v-show。 v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏 v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

vue的优点是什么？ 1、轻量级框架 2、简单易学 3、双向数据绑定 4、组件化 5、视图,数据,结构分离 6、虚拟DOM 7、运行速度更快

vue-router有哪几种导航钩子？ 第一种：全局导航钩子,router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。 第二种：组件内的钩子； 第三种：单独路由独享组件

Vue 中 computed 和 watch 有什么区别？ 计算属性 computed,侦听属性 watch,

计算属性 computed：
支持缓存，只有依赖数据发生变化时，才会重新进行计算函数；
计算属性内不支持异步操作；
计算属性的函数中都有一个 get(默认具有，获取计算属性)和 set(手动添加，设置计算属性)方法；
计算属性是自动监听依赖值的变化，从而动态返回内容。

侦听属性 watch：
不支持缓存，只要数据发生变化，就会执行侦听函数；
侦听属性内支持异步操作；
侦听属性的值可以是一个对象，接收 handler 回调，deep，immediate 三个属性；
监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些其他事情

v-for 中 key 的作用是什么？ key 是 Vue 使用 v-for 渲染列表时的节点标识。使用了 key 之后，当列表项发生变化时，Vue 会基于 key 的变化而重新排列元素顺序，并且移除 key 不存在的元素，提升运行效率。

路由之间跳转 声明式（标签跳转） 编程式（ js跳转）

-model的原理 v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。 可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。

VUE中的常见事件 v-for渲染列表 v-if 和 v-else，v-for遍历循环渲染，v-bind 绑定style

清除浮动的方式有哪些? clearfix, clear:both,overflow:hidden;

防抖和节流 防抖 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 节流 高频事件触发，在n秒内只会执行一次，所以节流会稀释函数的执行频率