>[success] # 防抖和节流 ~~~ 1.关于使用防抖和节流官方文档也给出了方案，可以使用 Lodash 等库来实现 ~~~ >[danger] ##### 给的第一个解决方案 ~~~ <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script> <script> Vue.createApp({ methods: { // 用 Lodash 的防抖函数 click: _.debounce(function() { // ... 响应点击 ... }, 500) } }).mount('#app') </script> ~~~ >[danger] ##### 推荐的解决方案 ~~~ 1.这种方法对于可复用组件有潜在的问题，因为它们都共享相同的防抖函数。为了使组件实例彼此独立， 可以在生命周期钩子的 created 里添加该防抖函数 ~~~ ~~~ app.component('save-button', { created() { // 使用 Lodash 实现防抖 this.debouncedClick = _.debounce(this.click, 500) }, unmounted() { // 移除组件时，取消定时器 this.debouncedClick.cancel() }, methods: { click() { // ... 响应点击 ... } }, template: ` <button @click="debouncedClick"> Save </button> ` }) ~~~