前端面试题

面试题(主要Vue)

1.双向数据绑定v-model的实现原理

v-model可以实现表单与数据之间的双向绑定，即修改表单的值，而它的实现原理就是:原生dom当中是有oninput事件的，当表单元素文本内容改变时就会出现一次回调，vue2：是通过value和input来实现v-model

总结就是以下三点:

​ 1.input元素的value=this.name

​ 2.绑定Input事件this.name=$event.target.value

​ 3.data更新触发re-render

2.对MVVM的理解

2.1介绍MVVM

​ mvvm全称是model-view-viewmodel，是M-V-VM三部分组成，对于我们前端而言，我们是基于视图UI开发，mvvm就是将view的状态和行为抽象化，其中的viewModel将视图ui和业务逻辑分开。

2.2从vue角度看mvvm

图片来自理解mvc和mvvm

3.computed有何特点

computed是vue的计算属性，根据依赖关系进行缓存的计算，只有当依赖关系发生改变时才会进行更新。

computed的每一个计算属性都会被缓存起来

提高性能

4.为何组件data必须是一个函数?

​ 根本上，export default看似是一个对象，实际上这个组件是一个class类，每次使用这个组件就是对class的一个实例化，多个实例化对data进行使用，所有的实例的data就会共享数据，也就是说，假如我在A中使用了这个实例，并且改变了data的值，那么B中的data是不是也会发生改变，这就是data为什么必须是一个函数。

​ 然后总结下回答面试官时该怎么说:

1. 在Vue中实例的data可以是对象或者函数，但是组件中的data必须是一个函数，组件是可以服用的Vue实例，把公共部分的模块抽离出来，达到复用和直接使用的效果
2. 如果data是一个对象，对象是一个引用类型，在堆空间内开辟一个区域，将内存存入，那么所有的组件公用此空间，也就是公用此data，当data改变时，其他组件中的data也会跟着发生改变
3. 如果data是一个函数，使用return来返回一个对象，这样每一个组件就会返回一个值，各不干扰，达到组件的复用功能

5.ajax请求应该放到哪个生命周期

• 放在mounted中
• JS是单线程的，ajax异步获取数据
• 放在Mounted之前没有用，只会让逻辑更混乱

有人会问，为什么不能放在created中，这不跟mounted差不多吗，其实理论上确实差不多，但是请求在created中时，视图的dom没有被渲染出来，拿不到真实dom，此时还只是虚拟dom。而在mounted中dom已经渲染出来了，可以直接操作dom

PS:在服务端不支持Mounted，所以服务端渲染一般用created

6.数组的一些API，哪些能改变原数组，哪些不能

改变原数组的

shift() //把数组的第一个元素删除
unshift()//把数组的最后一个元素删除
pop()//数组最后一个删除，并且返回该元素
push()//将一个值加入到数组的最尾部
reverse()//反转数据元素
sort()//默认按照升序排列数组
splice()//数据的删除，替换，查找

不改变原数组的

concat()//连接两个数组
every()//检测数组中所以元素是否满足条件
filter()//创建一个新数组
forEach()//遍历数组
indexOf()//查找数组中是否有这个元素，有就返回索引，没有就返回-1
join()//将数组转换成字符串
lastIndexOf() //从尾部来判断数组中元素的索引
map() //返回一个新数组，允许以键值对的形式存储
some() //判断数组中至少粗壮乃一个元素满足指定条件
slice()//开始索引，截取个数，截取数组
reduce() //对数组中每个元素执行一个由你提供的reduce函数
reduceRight()//同下
flat()//没用过
flatMap()//同上
find()//返回通过测试数组的第一个元素的值

7.for和forEach的区别

1. for循环可以使用break跳出循环，但forEach不能。
2. for循环可以控制循环起点（i初始化的数字决定循环的起点），forEach只能默认从索引0开始。
3. for循环过程中支持修改索引（修改 i），但forEach做不到（底层控制index自增，无法左右它）。