Question

我决定在我的页面上使用wysiwyg编辑器。我通过v-model="text"和simpy输出<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。您可以对其set函数去除值的设置的计算机进行v建模：

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

您会看到HTML输出更新有点滞后，但在键入时编辑器的延迟要小得多。我已经a fiddle进行了演示。复制一堆文本，看看它是如何处理的。

为什么我的所见即所得编辑在vuejs中工作得如此之慢？

1 个答案: