>[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> ` }) ~~~