Vue 3.0中如何通过DOM元素获取vnode？

不同前端框架的虚拟节点存储逻辑不同，以下是主流框架的具体实现方式：

Vue 2 #

Vue 2会在DOM元素上挂载__vue__属性指向对应组件实例，通过实例可获取虚拟节点：

const el = document.getElementById('your-id');
// 获取组件实例
const vueInstance = el.__vue__;
// 组件的根虚拟节点
const vnode = vueInstance._vnode;
// 组件根元素对应的vnode，其elm属性就是当前DOM元素

如果目标元素是组件内部的普通元素，需要从组件的vnode树中递归查找对应子节点。

Vue 3 #

Vue 3直接在DOM元素上挂载__vnode__属性，无需通过组件实例：

const el = document.getElementById('your-id');
const vnode = el.__vnode__;
// vnode.el 属性指向当前DOM元素

React #

React的虚拟节点以Fiber节点形式存在，DOM元素上会带有随机后缀的内部属性（如__reactFiber$abc123），可通过遍历属性获取：

const el = document.getElementById('your-id');
// 筛选出React Fiber对应的属性
const fiberKey = Object.keys(el).find(key => key.startsWith('__reactFiber$'));
const fiberNode = el[fiberKey];
// fiberNode包含虚拟节点的type、props等核心信息

⚠️ 注意：这是React的私有内部属性，不同版本可能发生变更，生产环境禁止使用，仅适用于调试场景。

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