文末
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。
首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
前端面试题汇总
JavaScript
性能
linux
前端资料汇总
开源分享：docs.qq.com/doc/DSmRnRG… }, created() { this.debouncedWatch = debounce((newValue, oldValue) => { console.log('New value:', newValue); }, 500); }, beforeUnmount() { this.debouncedWatch.cancel(); }, }; 复制代码
但有一个区别：只有在最后一次输入的 500ms 之后，才会将新的输入值打印日志到控制台。这说明 防抖 在生效。
观察者 的 防抖实现 只需要 3 个简单步骤：
1. 在 create() 钩子 里，创建 防抖回调，并将其赋值到实例上：this.debouncedWatch = debounce(..., 500)。
2. 在 观察者 回调 watch.value() { ... } 中 传入正确的参数 调用 this.debouncedWatch()。
3. 最后，beforeUnmount() 钩子中 调用 this.debouncedWatch.cancel() ，在卸载组件之前，取消所有还在 pending 的 防抖函数执行。
采用同样的方式，你可以对任意数据属性的 观察者 应用 防抖。然后就可以安全执行 防抖回调内部的一些比较重的操作，比如 网络请求、繁重的 DOM 操作，等等。
### 2. 事件处理器 防抖
---
上面一节，我展示了如何对 观察者 使用 防抖，那么常规的事件处理器呢？
我们重用之前用户输入数据到输入框的例子，但这一次会给输入框加个 事件处理器。
像往常一样，如果你没有采取任何缓冲的措施，每当值被修改时，会被打印到控制台：
复制代码
在输入框打几个字符。看看控制台：你会发现每次你输入的时候就会有日志被打印出来。
同样，如果你会执行一些比较重的操作（比如网络请求），可就不合适了。
对 事件处理器 使用 防抖，可以参考下面这个：
复制代码
输入一些字符。组件只有在最后一次输入的 500ms 之后，才会将新的输入值打印日志到控制台。防抖 再一次生效了！
事件处理器 的 防抖实现 只需要 3 个步骤：
1. . 在 create() 钩子 里，创建实例后，立刻将 防抖回调 debounce(event => {...}, 500) 赋值到 this.debouncedHandler 。
2. 在输入框的 template 中 给 v-on:input 赋上 debouncedHandler ：<input v-on:input="debouncedHandler" type="text" />
3. 最后，在卸载组件之前， 在 beforeUnmount() 钩子中 调用 this.debouncedHandler.cancel() ，取消所有还在 pending 的 函数调用。
另一方面，这些例子应用了 防抖 的技术。然而，同样的方式可以以用于创建 节流函数。
### 3. 注意
---
你可能不理解：为什么不直接在 组件的 method 选项中创建 防抖函数，然后在 template 中调用这些方法作为事件处理器？
// ... methods: { // Why not? debouncedHandler: debounce(function () { ... }}, 500) } // ... 复制代码
这比在实例对象上创建 防抖函数 要简单的多。
例如：
复制代码
这次不是在 created() 钩子 里创建 防抖回调了，而是将 防抖回调 赋给了 methods.debouncedHandler 。
你如果试过 demo，你会发现是有效果的！
问题是，组件使用 export default { ... } 导出的 options 对象，包括方法，会被组件实例重用。
如果网页中有 2 个以上的组件实例，那么所有的组件都会应用 相同 的防抖函数 methods.debouncedHandler — 这会导致防抖出现故障。
### 4. 总结
---
在 Vue 中，可以很轻松的对 观察者 和 事件处理器 应用 防抖 和 节流。
核心逻辑就是，在 created() 钩子 里，创建 防抖 或 节流 的回调，并赋值在实例上。
// ...created() { this.debouncedCallback = debounce((...args) => { // The debounced callback }, 500); }, // ...复制代码
A）然后在观察者内部调用实例上的防抖函数：
// ...watch: { value(...args) { this.debouncedCallback(...args); }, }, // ...复制代码
B）或在 template 中设定一个事件处理器：
复制代码
在这之后，每次调用 this.debouncedCallback(...args) ，就算执行频率非常高，内部的回调也能缓冲执行。
你对 Vue 中的 防抖 和 节流 还什么问题吗？欢迎提问！
## 大厂面试题分享 面试题库
#### 前后端面试题库 （面试必备） 推荐：★★★★★
地址：[前端面试题库](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO) <https://mp.weixin.qq.com/s?__biz=MzU5NzA0NzQyNg==&mid=2247485824&idx=3&sn=70cd26a7c0c683de64802f6cb9835003&scene=21#wechat_redirect>
### 文末
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。
首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。
更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
**前端面试题汇总**
**JavaScript**
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**
**性能**
**linux**
**前端资料汇总**
