为什么我的所见即所得编辑器在 vuejs 中运行这么慢？

Question

我决定在我的页面上使用所见即所得的编辑器。我正在通过 v-model="text" 和简单输出 <div v-html="text"></div> 使用简单的双向数据绑定。我是 vuejs 的初学者，但我需要问这个问题：为什么运行这么慢？是不是quill editor/medium-editor/vueditor.

也没关系

每次输入新字母时，延迟都非常明显，用户体验很差。我的控制台给出了一条消息：

[Violation] 'message' handler took 199ms

有时

[Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted'
event. Consider using MutationObserver to make the page more responsive.

如果我将它绑定到计算属性中（延迟最多 250 毫秒），情况会更糟——我很快就需要这样做。而且我还需要在我的案例中进行双向数据绑定。

我做错了什么？我怎样才能加快打字过程并改善打字体验？我的组件有大约 1,5k 行。难道是这样吗？

编辑：

我已将我的 1,5k 行代码组件拆分成单独的部分进行编辑，这已经将 Web 速度从大约 250 毫秒提高到 50-60 毫秒，但所见即所得编辑器和双向数据绑定仍然明显很慢。

edit2：代码（使用 vuetify）

示例 1（中速）：

<v-text-field
  label="Write something"
  v-model="text"
  counter
  max="120"
  rows="3"
  full-width
  multi-line
  single-line
></v-text-field>
<div  v-html="textComputed"></div>

data () {
  return {
    text: ''
  }
},
computed: {
  textComputed() {
  //using computed to add <li> tags
    return '<li>' + this.text.replace(/\n/g, "<br /></li><li>") + '</li>'
  }
}

示例 2（慢）：

<quill-editor 
      v-model="text"
      :options="editorOptionProTemplate"
      >
</quill-editor>
<div  v-html="textComputed"></div>

data () {
  return {
    text: ''
  }
},
computed: {
  //using computed for many variants for styling output in web (here just adding <b> tag)
  textComputed() {
    return '<b>' + this.text + '</b>'
  }
}

Answer 1

我认为你最好的朋友是debounce。您可以 v-model 计算其 set 函数去抖值的设置：

debounceText: {
  get() { return this.text; },
  set: _.debounce(function(newValue) {
    this.text = newValue;
  }, 100)
},

您会看到 HTML 输出的更新稍有滞后，但在您键入时编辑器中的滞后要少得多。我做了a fiddle来演示。复制一堆文本，看看它如何为您处理。

为什么我的所见即所得编辑器在 vuejs 中运行这么慢？

why my wysiwyg editor works so slow in vuejs?

wysiwyg

vue.js