小滴课堂22年新版互联网大厂前端高频面试题（10）~持续更新中

---

前言

小滴课堂，旨在让编程不在难学，让技术与生活更加有趣。 随着互联网+的时代，在线教育技术越来越便捷，小滴课堂依托在线教育时间以及空间上的便利，为广大IT从业者提供了更为方便、快捷的学习交流途径、提供大量高质量的IT在线课程。更多教程请访问xdclass.net（添加VX：xdclass99）

一、谈谈你对Vue中computed和watch的理解

回答

（一）作用

1. computed能够⾃动追踪依赖值的变化，动态返回内容

2. 监听是⼀个过程，在监听的值变化时，可以触发⼀个回调，并做⼀些事情

(二）如何选择

• 两者大部分情况下都能实现同⼀种功能，作⽤决定选择。只是需要动态值，那就⽤计算属性。需要知道值的改变后执⾏业务逻辑，才用 watch，⽤反或混⽤虽然可行，但都是不合理的用法。

（三）区别的相关问题

1. computed 是⼀个对象时，它有哪些选项？

• 有get和set两个选项

2. computed 和 methods 有什么区别？

• methods是⼀个⽅法，它可以接受参数，而computed不能，computed是可以缓存的，methods不会。

3. computed 是否能依赖其它组件的数据？

• computed可以依赖其他computed，甚⾄是其他组件的data

4. watch 是⼀个对象时，它有哪些选项？

• handler，deep 是否启⽤深度监听，immeditate 是否⽴即执行

（四）总结

1. 当有⼀些数据需要随着另外⼀些数据变化时，建议使⽤computed。

2. 当有⼀个通用的响应数据变化的时候，要执行⼀些业务逻辑或异步操作的时候建议使⽤watcher

二、谈谈你对事件流的理解

回答

（一）相信很多同学都会很懵逼，到底什么是事件流模型。

（二）这里主要就是考察大家对事件冒泡和事件捕获的理解。只要大家大致说出对事件冒泡和事件捕获的理解即可。

1. 事件冒泡(fasle/不写)：当触发⼀个节点的事件是，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点。

2. 事件捕获(true)：当触发⼀个节点的事件时，会从DOM根节点开始，依次触发其祖先节点的同类型事件，直到当前节点自身。

3. 什么时候事件冒泡？什么时候事件捕获？

• 当使用addEventListener绑定事件，第三个参数传为true时表示事件捕获；
• 除此之外的所有事件绑定均为事件冒泡。

4. 阻止事件冒泡：

• IE10之前，e.cancelBubble = true;
• IE10之后，e.stopPropagation();

5. 阻止默认事件：

• IE10之前：e.returnValue = false;
• IE10之后：e.preventDefault();

三、小程序的底层双线程解析

回答

（一）小程序的双线程：

• 小程序的渲染层和逻辑层分别有两个线层管理：渲染层的界⾯由webview渲染，逻辑层由JsCore线程运行JS教程。

• ⼀个程序存在多个页⾯，所以渲染层也会存在多个webview线程。在小程序逻辑层和渲染层的通讯都是通过Native（微信客户端）做中转，逻辑层把数据变化通过native通知到视图层，触发视图层页面更新，视图层把触发的事件通过native通知到逻辑层进行业务处理。

• 小程序通讯模型图如下：

（二）为什么要设计双线程？

• 这里是为了管控安全，避免开发者去操作DOM。小程序中渲染线程和脚本线程是分别运行在不同的线程中的，因为两者分开，逻辑层运⾏在JsCore中，是没有⼀个完整浏览器对象的，因而会缺少相关的DOM的API和BOM的API。

四、写了多年JS代码的你知道JS的事件循环机制吗？

回答

（一)思路

1. JavaScript语⾔

• 是⼀门单线程的⾮阻塞的脚本语⾔

  • 为什么 JS 是⼀门单线程的语⾔？

  因为在浏览器中，需要对各种的DOM操作；
  当JS是多线程的话，如果有两个线程同时对同⼀个DOM进行操作，⼀个是在这个DOM上绑定事件，另外⼀个是删除该DOM，此时就会产⽣歧义
  因此为了保证这种事情不会发生，所以JS以单线程来执行代码，保证了⼀致性
  

  • JS 非阻塞应该如何理解？

  当JS代码从上往下执行，遇到需要进行⼀项异步任务的时候，
  主线程会挂起这个任务，继续往下执⾏代码，然后在异步任务返回结果的时候再根据⼀定规则去、执行
  

（二）事件循环

• 结合代码分析事件循环

// 同步任务
console.log('首次同步任务开始');

// 异步任务（宏任务）
setTimeout(() => {
  console.log('setTimeout 1');
  new Promise((resolve) => {
    console.log('Promise1');
    resolve();
  }).then(() => {
    console.log('Promise then 1');
  });
}, 1000);

// 同步任务
console.log('首次同步任务结束');

// 异步任务（微任务）
new Promise((resolve) => {
  console.log('Promise2');
  resolve();
}).then(() => {
  console.log('Promise then 2');
});

• 异步任务分类：宏任务（setTimeout），微任务（promise）
• 所有同步任务都在主线程上执行，形成⼀个执行栈
• 遇到异步任务放到任务表中，等事件执行完成（ajax请求完成、setTimeout设置时间到期），之后放⼊到任务队列
• 当执行栈的同步任务执行完成之后，就会执行任务队列的第⼀个异步任务，其中把宏观任务和微观任务都执行完成后才进行下⼀次循环

五、怎么通过 JS 实现防抖与节流？

回答

（一）思路

1. 什么是防抖

（1）在事件被触发n秒后再执⾏回调函数，如果在这n秒内⼜被触发，则重新计时

• ⽤户在输⼊框中连续输⼊⼀串字符后，只会在输⼊完后去执行最后⼀次的查询ajax请求，这样可以有效减少请求次数，节约请求资源
• window的scroll事件，不断地调整浏览器的窗口⼤小、或者滚动时会触发对应事件，防抖让其只触发⼀次

2. 实现

handleClick() {
  clearTimeout(this.timer);
  this.timer = setTimeout(() => {
   console.log(111);
 }, 1000);
},

（二）什么是节流

1. 规定⼀个单位时间，只能有⼀次触发事件的回调函数执⾏，如果在同⼀时间内某事件被触发多次，只有⼀次能⽣效

（1）鼠标连续不断地触发某事件（如点击），按照设置的时间来逐次执行；

（2）在页面的⽆限加载场景下，当⽤户频繁滚动页面时，每隔⼀段时间才发⼀次请求展示数据，而不是按照⽤户滚动次数来请求数据

2. 实现

handleClick() {
  if (this.isRun) {
    return;
  }
  this.isRun = true;
  setTimeout(() => {
    this.isRun = false;
    console.log(111);
 }, 1000);
},

六、中高级面试题常考之JS异步事件轮询(event Loop)机制

回答

• js采⽤事件轮询主要是⽤来解决js单线程运行带来的⼀些问题
• js为什么是单线程（思考⼀下如果是多线程，那我同时两个任务去删除或修改同⼀个dom会发⽣什么就明白了）
• 先看⼀下下图事件轮询机制如何运行

• 左边为运行的主线程，右边为我们的事件队列。主线程的同步任务执行完了之后事件轮询机制会来到我们的事件队列查看是否存在异步任务，存在就调到主线程进行执行，直到事件队列⾥不存在异步任务为止
• 练习时间

在这里插入图片描述

• 先看完自己做⼀下再看答案在下面

答案为：23541

解析：因为235是同步任务自上而下执行，41是异步的回调会执行完了同步任务再去事件队列轮询执行（有兴趣的可以再了解⼀下宏任务微任务）