关于vue3 elementPlus中的表单验证 $refs对象获取问题

首先上错误

        Cannot read properties of undefined(reading 'validate')

 无法使用这个函数，查看代码其实是无法获取到这个对象

（其实从此处可以窥探vue的组件如何被加载） 

目前的结论：

       1.【使用情况】

        在使用this.$refs获取ref对象 的方法中，必须保证该ref所在的组件被加载。

【dialogFormVisible值如果在获取ref对象之前从来没有变为true 也就是弹窗组件没有显示过，则vue并不会将dialog组件加载】

【如果dialogFormVisible获取ref对象至少一次变为true 则此时dialog组件包括内部组件已被加载，可以被获取 】

<template>
    //弹窗组件
  <el-dialog v-model="dialogFormVisible" >
    <el-form ref="ruleFormRef"
             :model="formModel"
             :rules="dialogFormRules">
      <el-form-item label="显示" prop="name" >
           //model方法内部调用了获取ref对象ruleFormRef的验证方法validate
        <el-input v-model="model"></el-input>
      </el-form-item>
      <el-button @click="test">测试</el-button>
    </el-form>


  </el-dialog>
  <el-button @click="dialogFormVisible = !dialogFormVisible">显示</el-button>
  <el-button @click="test">测试</el-button>

</template>


//使用ref对象内部的函数(此处是ele组件的验证方法)
//this.$refs.ruleFormRef.validate(valid =>{})