前端高频面试题汇总，前端面试者速藏

面试对于经验老道的人来说不在话下，但是针对实习生或者刚毕业的人来说，前端开发岗位的面试很是比较怵的。今天知了姐整理了前端高频面试题汇总，赶紧背起来。

1.vue双向数据绑定的原理？

mvvm场景：数据操作比较多的场景，需要大量使用DOM元素时，采用mvvm的开放方式，会更加便捷，让开发者更多的经历放在数据的变化上，解放繁琐的DOM元素

• MVVM 模型，

• M 数据 从后台获取的商品数据

• V 视图 就是写好的页面，每一个div，每一个input 都是视图

• VM 视图模型，

• 数据发生变化，通过视图模型会改变视图的显示，视图上的改变，也会通过视图模型进而影响数据的变化

• 核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

2.vue的生命周期有哪些

beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）

mounted 真实dom挂载完成 updated只要data数据被改变 就会自动更新触发 destroy销毁全局计时器和自定义事件

如果使用了keep-alive会在多两个：activated、deactivated当组件初次加载会执行前4个生命周期，分别为： beforeCreate、created、beforeMount、mounted

3.v-if 和v-show有什么区别？

相同点:都可以控制dom元素的显示和隐藏

不同点:v-show只是改变display属性，dom元素并未消失，切换时不需要重新渲染页面

v-if直接将dom元素从页面删除，再次切换需要重新渲染页面

4.async await 是什么？它有哪些作用？

async await 是ES7的新增，async用于声明一个函数，await用于等待一个异步方法执行完成。async函数返回的是一个promise对象,可以用.then方法添加回调函数，在函数执行的中，一旦遇到await就回先返回,等到这个异步操作完成之后，它再进行函数体内后面的这个语句

5.v-for 循环为什么一定要绑定key ?

给每个dom元素加上key作为唯一标识 ，diff算法可以正确的识别这个节点，使页面渲染更加迅速!

6.组件中的data为什么要定义成一个函数而不是一个对象？

每个组件都是 Vue 的实例。组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他

7.什么是symbol

是es6引入新的原始数据类型Symbol，表示独一无二的值

14.什么是同源策略

所谓同源策略就是浏览器的一种安全机制，来限制不同源的网站不能通信（域名、协议、端口号相同）

8.promise是什么，有什么作用

promise 是一个对象， 可以从改变对象获取异步操作信息

他可以解决回调地狱的问题，也就是异步深层嵌套问题

9.什么是递归，递归有哪些优缺点？

递归：如果函数在内部可以调用其本身，那么整函数就是递归函数，简单理解：函数内部自己调用自己，这个函数就是递归函数，

优点：机构清晰，可读性强

缺点：效率低，调用站可能溢出，其实每一次函数调用会在内存栈中分配空间，而每个进程的栈的内容粮食有限的。当调用的层次太多时，就会超出栈的容量，从而导致栈溢出

10.vue性能优化

函数式组件

• 路由懒加载

• v-for要绑定key key是虚拟dom唯一标志,能帮vue高效的动态渲染页面,渲染页面时会使用diff算法,会比较新旧dom,在比较时只比较同一级,不进行跨级比较,key发生变化节点进行销毁,并且是子节点先销毁。

• computed缓存数据和watch keep-alive缓存组件

• v-if和v-for不要同时使用,v-show是display,销毁是display-none.v-if为true创建.false销毁。

• 设计vue响应式数据时不能设计太深.会做全量递归的计算.

• 组件的颗粒度不能设计太细.合理划分.层级越深性能消耗越大

• 防抖节流

• ui组件库按需引入

以上就是知了姐整理的10道前端高频，面试题，希望对你接下俩的卖你是有帮助，知了堂还有很多前端经典面试题，如果有需要的话可以来联系我们在线客服领取哟。