Vue3组件中如何避免modelValue事件引发的循环更新？

问题根源在于：用户在编辑器输入时，组件通过$emit更新父组件的form.title，父组件同步后触发当前组件的modelValue监听，将值回写至编辑器，形成无意义的循环，导致输入异常。以下是两种保留watch同时避免循环的可行方案：

方案一：用标志位区分内部/外部更新 #

通过添加内部状态标记，识别是组件自身触发的更新（用户输入）还是父组件主动修改的值，仅在外部更新时同步到编辑器：

<template>
    <wysiwyg-editor :value="modelValue" @update="handleEditorUpdate" />
</template>

<script>
import WysiwygEditor from './WysiwygEditor'

export default {
    emits: ['update:modelValue'],
    components: { WysiwygEditor },
    props: {
        modelValue: {
            type: String,
            required: false,
            default: null
        }
    },
    data() {
        return {
            isInternalUpdate: false
        }
    },
    methods: {
        handleEditorUpdate(event) {
            this.isInternalUpdate = true
            this.$emit('update:modelValue', event.target.value)
            // 等待watch执行完成后重置标记
            this.$nextTick(() => {
                this.isInternalUpdate = false
            })
        }
    },
    watch: {
        modelValue(to) {
            if (!this.isInternalUpdate) {
                this.editor.setValue(to)
            }
        }
    }
}
</script>

方案二：对比值差异后再更新 #

如果编辑器实例支持获取当前内容的API，直接对比编辑器当前值与modelValue，仅当二者不同时执行回写，避免重复操作：

<template>
    <wysiwyg-editor ref="editor" :value="modelValue" @update="$emit('update:modelValue', $event.target.value)" />
</template>

<script>
import WysiwygEditor from './WysiwygEditor'

export default {
    emits: ['update:modelValue'],
    components: { WysiwygEditor },
    props: {
        modelValue: {
            type: String,
            required: false,
            default: null
        }
    },
    watch: {
        modelValue(to) {
            // 假设编辑器提供getCurrentValue方法获取当前内容
            const currentEditorValue = this.$refs.editor.getCurrentValue()
            if (to !== currentEditorValue) {
                this.$refs.editor.setValue(to)
            }
        }
    }
}
</script>

两种方案可根据编辑器的API支持情况选择：方案一通用性更强，无需编辑器额外API；方案二更直观，能减少不必要的DOM操作。

内容的提问来源于stack exchange，提问作者Cyril N.