Vue3中如何通过表单元素DOM对象获取并修改v-model绑定值？

针对你给出的场景，有两种可行的方式实现需求，下面分别说明：

方式一：直接操作响应式数据 #

Vue3会在渲染后的DOM元素上挂载内部的__vnode__属性，通过它可以获取到组件上下文及绑定的响应式数据，直接修改即可同步更新视图：

const input_dom = document.querySelector("input");

// 获取DOM对应的Vue虚拟节点
const vnode = input_dom.__vnode__;
// 从组件上下文中拿到setup返回的state对象
const state = vnode.ctx.state;
// 修改响应式值，视图会自动更新
state.text = "通过vnode修改的内容";

方式二：模拟用户输入触发v-model更新 #

这种方式更贴近实际用户交互，通过修改input的value并触发input事件，让Vue的v-model逻辑自动更新绑定的响应式数据：

const input_dom = document.querySelector("input");

// 修改input的显示值
input_dom.value = "模拟输入的内容";
// 触发input事件，触发v-model的更新逻辑
input_dom.dispatchEvent(new Event("input"));

两种方式的区别 #

• 方式一直接操作响应式数据，更新更高效，适合需要直接控制数据状态的场景，但依赖Vue内部的__vnode__属性，属于非公开API，未来版本可能存在变动风险。
• 方式二模拟用户交互，完全遵循Vue的响应式更新流程，兼容性更好，但会触发所有绑定在该input上的事件监听逻辑。

内容的提问来源于stack exchange，提问作者Autumn