2021面试题

1.防抖和节流

• 防抖：在事件被触发n秒后在执行回调，如果在这n秒内事件在此被调用则重新计时。（总的来说，适合多次事件一次响应的情况）

• 实际举例：在请求后台数据时，由于网路慢的情况下，用户多次点击请求按钮。

• 节流：规定一个时间，在这个时间内，只能有一次触发事件的回调函数执行，如果在同一个时间内某事件被多次触发，只有一次能生效。（总的来说，适合大量事件按时间做平均分配触发。）

• 实际举例：当实现dom拖拽功能时给拖拽元素绑定拖拽事件，每当元素稍微移动一点就会触发大量回调函数，导致浏览器卡死。

https://juejin.cn/post/6844903535125987335

2.js事件循环机制

• js是单线程执行
• 宏任务：script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境)
• 微任务：Promise、MutaionObserver、process.nextTick(Node.js 环境)
  js分为同步执行和异步执行两个队列，当同步执行完毕，会执行异步队列。异步队列中分为宏任务、微任务。优先执行微任务等微任务全部执行完毕后再执行宏任务。

console.log('1');

setTimeout(function() {
  console.log('2');
}, 0);

Promise.resolve().then(function() {
  console.log('3');
}).then(function() {
  console.log('4');
});

console.log('5');

执行结果 1、5、3、4、2

image.png image.png

3.堆和栈

堆：队列优先，先出先进；动态分配空间一般有程序员分配释放，若程序员不释放，程序结束时又浏览器的垃圾回收机制进行回收。（动态分配的内存，大小不定不会自动释放；）
栈：先进后出；由操作系统自动分配释放，存放函数的参数，局部变量的值等。（自动分配的内存空间，它由系统自动释放；）

• 与前端相关的内容：
  前端数据类型分为：
  1.复杂类型：对象，数组，函数等
  2.简单数据类型：undefined、null、 boolean、number、string
• 简单数据类型存放在栈中；复杂数据类型也存放在栈中，但是栈中存放的是指向堆中的地址值。因为复杂类型数据大小不定不能存放在栈中，地址值的大小是确定的。

image.png

4.new操作符具体干了什么

1.创建空对象；
2.空对象的原型指针指向构造函数的原型对象；
3.利用函数的call方法改变this指向，在空对象上挂载属性或方法；
4.返回对象。

5.difft算法以及key

6.数组的方法

• 增：push()
• 删：splice(); delete
• 改：splice()； slice()
• 查：indexOf()、lastIndexOf()
• 循环：map，filter，find，forEach

7.felx布局的缺点

• felx布局是css3中的新特性。兼容性差，IE9及以上浏览器不支持。

8.vue的优化

• 路由懒加载
• keep-alive缓存页面
• 使用v-show复用DOM
• v-for遍历避免同事使用v-if
• 事件的销毁
• 图片懒加载
• 第三方插件按需引入（像element-ui这样的第三方组件库可以按需引入避免体积太大）

9.vue中data为什么是function不是object

• 对象是引用类型，当同一个组件被多次引用，它们的data都指向同一个内存地址，换句话说，所有的组件共享一组data数据。
• 将data设置成一个函数，该函数会返回一个初始数据对象，用function return其实就相当于申明了薪的变量，相当于独立。

10.vue的响应式原理

• 当你把一个普通的对象传入Vue实力作为data选项，Vue将遍历此对象所有的property，并使用Object.defineProperty把这些propert全部转为getter/setter这些getter/setter对于用户来说是不可见的，但是在内部它们让Vue能够追踪依赖，在property被访问和修改时通知变更，每个组件实例都对应一个watcher吃力，它会在组件渲染的过程中把“接触”过的数据property记录为依赖。之后当依赖项的setter出发时，会通知watcher，从而使他关联的组件重新渲染。

11.为什么vue检测不到对象和数组的变化

• 因为vue无法检测到propety增、删，vue在初始化实例时会对propetty执行getter/setter，所以property必须在data对象上存在才能让vue将它转换为响应式。
• 解决方法：this.$set()

12.new Vue（）实例中，data可以直接是一个对象，为什么在vue组建中，data必须是一个函数呢？

• 因为组件是可以复用的,JS 里对象是引用关系,如果组件 data 是一个对象,那么子组件中的 data 属性值会互相污染,产生副作用。所以一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。new Vue 的实例是不会被复用的,因此不存在以上问题。

13.computed 和 watch 有什么区别

• computed计算属性：依赖其它属性值，只有他依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值，如果和上次计算结果不一致，重新渲染页面。
• watch侦听器：更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据发生变化时都会执行回调进行后续操作。

computed和watch应用场景

• computed：当我们需要进行数值计算，并且依赖于其它数据时，应该使用computed，因为可以利用computed的缓存特性，避免每次获取值时， 都要重新计算。
• watch：当我们需要数据变化时执行的操作时使用。

能使用箭头函数定义computed和watch吗？

• 不能使用箭头函数来定义watcher函数，理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向Vue实例，为undefined。

14.v-if和v-for在同一个标签中的执行顺序

• 当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。（官网文档原话）