观看 vue 组件的innerHTML

Question

我目前正在使用 npm 包 vue3-markdown-it 在我的一些内容上呈现 markdown。现在，一旦组件呈现，我想使用它的innerHTML 并在将内容发送到我的div 之前进行一些自定义更改 然而，一旦内容发生变化，vue3-markdown-就需要一些时间来渲染markdown，这很好，但如果我为内容的变化添加一个观察者，markdown组件的innerhtml将返回空。我想观察组件的innerHTML，以便我可以在完成渲染时运行我的更改函数。知道如何实现吗？

data(){
return{
content: 'My content',
}
}

// at change of content markdown component automatically renders the
// new content with formatting, but it returns old data until rendering
// is complete, so I want to wait for the rendering to complete but
// without adding a timeout

watch: {
content: {
handler: function(){
myDiv.innerHTML = markedComponent.innerHTML + 'my changes'
}
}

// desired result
'markedComponent.innerHTML my changes'

// result I'm getting
"my changes"

Answer 1

使用 nextTick 应该可以解决你的问题。

watch: {
  content: {
    handler(){
      Vue.nextTick(() => {
        myDiv.innerHTML = markedComponent.innerHTML + 'my changes'
      })
    }
  }
}

Composition API 看起来像这样：

<script setup>
import { watch, nextTick } from 'vue'
watch(
  () => content, 
  () => nextTick(() => { myDiv.innerHTML = markedComponent.innerHTML + 'my changes' })
)
</script>