vue中使用refs定位dom的坑

使用element-ui的表单验证,出现"this.$refs.ruleForm.validate is not a function"

使用mint-ui的popup,在mounted(){}钩子里面使用this.$refs.xxx，打印出来的却是undefined

以上的问题,貌似没有关联,但深究下去,都存在这个状况:在mounted钩子中使用this.$refs，而ref是定位在有v-if、v-for、v-show中的DOM节点.

为什么这种状况下,会出现问题呢? 我们仔细的了解一下vue的实例生命周期

我的理解是:
mounted阶段,DOM结构已经出来了,但是如果在DOM结构中的某个DOM节点(virtual DOM)使用了v-if、v-show或者v-for（即根据获得的后台数据来动态操作DOM，即响应式），那么这些DOM是不会再mounted阶段找到的.所以才会有undefined等错误

所以如果想要真正地在DOM加载完成后拿到数据，就需要调用VUE的全局api ： this.$nextTick(() => {})

使用element的表单验证,如果是是配合v-show,v-if使用,使用自定义验证函数的形式.
如果配合v-for使用,那么请参照示例,写成形如 :prop="productGroup.${index}.num"
详见(https://yq.aliyun.com/articles/712112/edit?spm=a2c4e.11153940.0.0.62481ce5pth2vH)