Vuejs，带有setter冻结组件的计算属性

Question

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

<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

此类问题的常见解决方案是对调用进行去抖动，这会延迟回调事件。 例如，您可以通过使用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)
      }
    }
  }
}