前端面试题总结（一）

众所周知，今年的大环境实在是太差了，小编也是在找工作的时候被虐的体无完肤，因此决定把面试过程中遇到的一些面试题总结一下，希望能给大家带来一点帮助。

1.v-if 和 v-show

v-show 是通过控制display属性来进行DOM的显示与隐藏，主要用于频繁操作；
v-if 是真正意义上的条件渲染（销毁和创建元素），true时创建DOM，false时销毁DOM，主要用于大量数据渲染到页面，频繁使用会消耗性能；
需要频繁切换时用v-show比较好。

2.v-if 和 v-for

v-for 优先级高于v-if，每次使用v-for都会执行v-if，影响性能，所以不建议同时使用，必要情况下，可以选择使用computed过滤掉不需要显示的项目。

3.Import和require的区别

1. require是CommonJS/AMD规范，Import是ES6规范；
2. require是在运行时加载，所以理论上可以用在代码的任何地方，import是编译时调用，所以必须放在文件开头；
3. import是ES中的语法，目前所有的引擎都还没实现import，所以import语法会被转码为require。

4.query和params区别

• 写法不同，query是用path编写传参地址，params是用name编写传参地址；
• 接收方式不同，query接收参数：this. $ route.query.name，params接收参数：this.$router.params.name；
• query在刷新页面时参数不会消失，params在刷新页面时，参数会消失；
• query参数会显示到地址栏中，相当于get请求；params参数不会显示到地址栏，相当于post请求。

5.typeof和instanceof区别

相同点：typeof和instanceof都是判断数据类型的方法
不同点：typeof会返回一个基本数据类型，instanceof返回的是布尔值（true/false）,typeof对于丰富的对象实例，返回的是object，无法得到真实的数据类型，instanceof用来判断对象（obj1 instanceof obj2）,obj2必须为对象，如果obj2点原型属性存在于obj1的原型链上，则为true，否则为false。

6.防抖和节流

防抖：一定时间内事件没有被触发，事件处理函数才会执行一次。
节流：在持续触发一个事件时，事件只会在一定时间内执行一次处理函数。

7.forEach和map方法

都是遍历，map()会分配内存空间存储数据并返回，forEach()不会返回数据；map()不会改变原数组，而是返回新数组，forEach()会改变原数组。

可能还会问forEach()可以用break跳出循环吗？
答：forEach不能使用return或者break跳出循环，因为foreach的参数是回调函数，会遍历执行多个回调函数，return会跳出当前的回调函数，其他的还会继续执行，而break会报错。解决办法：抛出异常，捕获到异常就终止遍历。

8.some和every方法

相同点：some和every都有三个参数，item、index、array，都可循环遍历数组。
不同点：every相当于且，都满足条件时，才返回true，否则返回false；some相当于或，只要有一个参数满足条件，就返回true，都不满足才返回false。

9.vue 事件绑定、属性绑定和双向绑定的区别

• 属性绑定：v-bind 可简写成： ，比如 v-bind:title简写成 :title

• 事件绑定：v-on 可简写成@，比如 @click=‘func’，事件可以连接修饰符，如@click.stop.once=‘func’
  .stop:阻止冒泡
  .prevent:阻止默认事件如跳转，表单的默认提交
  .capture:事件监听时的事件捕获
  .self:事件只在自己身上触发，不包括子元素、父元素
  .once:事件只触发一次

• 双向绑定：v-model，数据双向绑定，一般用于表单元素