Vue.js，带有setter冻结组件的计算属性

问题描述

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

int _len = len+24;
while(_len>0 || count%24){
    if(ind<24) msg[ind] = bytes[ind];
    else{
        msg[ind] = (_len>0?buf[ind-24]:'@')^msg[ind-24];
    }
    ++ind;
    --_len;
    ++count;
}

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

解决方法

对此类型问题的常见解决方案是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)
      }
    }
  }
}