不使用ref 生产环境__vnode未定义如何访问表单vnode

生产环境下Vue会对框架内部的私有属性名做压缩混淆处理，你代码里访问的__vnode是开发环境临时暴露的内部属性，生产构建时会被替换为随机短名称，硬编码访问自然会拿到undefined。
注意：所有以双下划线开头的Vue内部属性（包括__vnode、__vueParentComponent等）都属于非公开私有API，不仅生产环境会被混淆，不同版本的Vue内部属性挂载逻辑也可能调整，业务代码直接访问这类属性本身就存在极大的兼容风险，不推荐使用。

如果确实不想逐个给form元素绑定ref，推荐用自定义指令的方式获取vnode，这是最稳定、不依赖框架内部实现的方案：

1. 注册自定义指令，指令钩子本身会直接传入当前绑定元素对应的vnode，你可以主动把vnode挂载到DOM元素的自定义属性上（自定义属性不要用双下划线开头，避免和框架内部属性冲突）

export default {
  directives: {
    formVnode: {
      mounted(el, _, vnode) {
        // 主动挂载vnode到DOM上，属性名自定义，生产环境不会被混淆
        el._selfVnode = vnode
        // 可以直接在这里拿到你需要的onDoSubmit事件，提前处理逻辑
        const doSubmitHandler = vnode.props?.onDoSubmit
      },
      updated(el, _, vnode) {
        // 组件更新时同步更新vnode引用
        el._selfVnode = vnode
      },
      unmounted(el) {
        // 卸载时清除引用，避免内存泄漏
        delete el._selfVnode
      }
    }
  },
  updated() {
    const forms = document.getElementsByTagName('form')
    forms.forEach(form => {
      // 直接访问自己挂载的vnode属性即可
      const myProp = form._selfVnode?.props?.onDoSubmit
    })
  }
}

2. 模板中给所有需要识别的form标签加上指令即可，不需要额外传参

<form v-form-vnode @do-submit="handleSubmit1">/* 表单内容 */</form>
<form v-form-vnode @do-submit="handleSubmit2">/* 表单内容 */</form>

如果没有特殊限制，优先用函数式ref批量收集表单元素，这是Vue官方明确支持的写法，完全没有兼容风险：

<template>
  <form :ref="collectForm">/* 表单内容 */</form>
  <form :ref="collectForm">/* 表单内容 */</form>
</template>

<script>
export default {
  data() {
    return {
      formList: []
    }
  },
  methods: {
    collectForm(el) {
      if (el) this.formList.push(el)
    }
  },
  updated() {
    this.formList.forEach(formEl => {
      // 结合自定义指令拿vnode，或者直接操作DOM、绑定事件都可以
    })
  },
  beforeUnmount() {
    this.formList = []
  }
}
</script>

注意：不要尝试通过遍历DOM属性名匹配__v开头的属性来获取vnode，不同Vue版本的内部属性压缩规则、挂载逻辑都可能变化，这类hack写法随时可能在版本更新后失效。

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