Vuejs，使用 setter 冻结组件计算属性

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 the call, which delays the callback event. For example, you could debounce the mutation by using clearTimeout() to cancel any pending calls, and then 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)
      }
    }
  }
}

Vuejs，使用 setter 冻结组件计算属性

Vuejs, computed property with setter freeze component

javascript

vue.js

rich-text-editor

computed-properties

tiptap

Vuejs，使用 setter 冻结组件计算 属性

Vuejs, computed property with setter freeze component

javascript

vue.js

rich-text-editor

computed-properties

tiptap

Vuejs，使用 setter 冻结组件计算属性