Vuejs，带有设置器冻结组件的计算属性

Question

我有一个带有tiptap 文本编辑器的组件。我使用带有 setter 的计算属性将数据绑定到编辑器。

<template>
  <tiptap model="editNoteContent" extensions" />
</template>

<script>
export default {
  computed: {
    editNoteContent: {
      get() {
        return this.$store.state.Notes.currentNote.text;
      },
      set(text) {
        this.$store.commit("Notes/updateCurrentNoteText", text);
      },
    }
  },
}
</script>

当我快速输入大量文本时，我的组件会冻结。我使用计算属性是因为我必须获取一些当前文本，然后才能更改它。有人知道这种情况的最佳做法吗？我该如何解决这个问题？

Answer 1

此类问题的常见解决方案是debounce 调用，这会延迟回调事件。例如，您可以使用clearTimeout() 取消任何挂起的调用，然后使用setTimeout() 延迟$store.commit() 调用来消除突变：

export default {
  computed: {
    editNoteContent: {
      get() { /*...*/ },
      set(text) {
        // cancel pending commits, if any
        clearTimeout(this._timer)

        // commit newest text after 300ms
        this._timer = setTimeout(() => {
          this.$store.commit("Notes/updateCurrentNoteText", text)
        }, 300)
      }
    }
  }
}