Vue 沒有內建支援防抖和節流，但可以使用 Lodash 等庫來實現。

如果某個元件僅使用一次，可以在 methods 中直接應用防抖：

<script src="https://unpkg.com/[email protected]/lodash.min.js"></script>
<script>
  Vue.createApp({
    methods: {
      // 用 Lodash 的防抖函式
      click: _.debounce(function() {
        // ... 響應點選 ...
      }, 500)
    }
  }).mount('#app')
</script>
 

但是，這種方法對於可複用元件有潛在的問題，因為它們都共享相同的防抖函式。為了使元件例項彼此獨立，可以在生命週期鉤子的 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>
  `
})