Vue3使用createApp动态注入组件存在表单元素时报错如何解决

开发者阿泽

2026-9-30

问题原因

这个报错并非来源于你的Vue业务代码，报错堆栈的来源是ID为pejdijmoenmkgeppbflobdenhhabjlaj的Chrome扩展，对应是1Password密码管理扩展。
该扩展会自动扫描页面内所有input、select等表单元素，用于识别可填充的表单字段、生成填充建议。你的使用场景是动态创建Vue实例挂载到临时DOM节点后，直接提取节点的outerHTML使用，扩展在扫描这类未正常插入文档流、或属性不完整的临时表单节点时，内部逻辑未做空值判断就调用了replace方法，进而触发类型错误。

可行解决思路

方案1：给表单元素添加忽略标记
给子组件内所有input、select标签添加data-1p-ignore属性，1Password扩展会直接跳过带该标记的元素，不会触发扫描逻辑，示例代码：

<input type="text" value="hello" data-1p-ignore>

方案2：优化Vue实例销毁逻辑
你提取完组件的outerHTML后，主动销毁创建的Vue实例，清理临时DOM节点，避免残留节点被扩展扫描到，修改后的注入代码如下：

const tempDiv = document.createElement('div')
const app = createApp(StoryStep, {core: this.$page.props.core, step: d.data})
    .mount(tempDiv)
const html = app.$el.outerHTML
// 主动销毁实例、移除临时节点
app.unmount()
tempDiv.remove()
return html

方案3：使用隔离的虚拟文档渲染组件
创建脱离当前页面上下文的虚拟文档来渲染组件，所有扩展只会扫描当前顶层文档的DOM，不会触达虚拟文档内的节点，可彻底避免和扩展的冲突，代码示例：

// 创建隔离的虚拟文档
const virtualDoc = document.implementation.createHTMLDocument('')
const tempDiv = virtualDoc.createElement('div')
const app = createApp(StoryStep, {core: this.$page.props.core, step: d.data})
    .mount(tempDiv)
const html = app.$el.outerHTML
app.unmount()
return html