vueの頻繁な操作には、防振とスロットルが使用されます

防振とスロットル

Vueには、ブレ防止とスロットルのサポートが組み込まれていませんが 、Lodashなどのライブラリを使用して実装でき ます。

コンポーネントを1回だけ使用する場合は、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>
  `
})