vue中报错Error in onReady hook: "TypeError: Cannot read property 'setRules' of undefined"

Vue中报错“Error in onReady hook: "TypeError: Cannot read property 'setRules' of undefined"”

image.png

百度说“refs和ref名字不一致：把refs和ref名字保持一致就行了”，但是我这本来就是一致的，一直回退后发现，组件在加v-if判断之前都是正常的，没有报错，那么问题就在v-if处，把v-if改成v-show就可以了。

image.png

vue的加载渲染，优先渲染html代码，此时js代码还没有执行，所以动态属性还没有值，因此被v-if包裹的代码块没有被封装，此时执行js初始化代码的时候，调ref组件自然是undefined的。而v-show会在加载html的时候加载完整代码，只是不展示。

v-if和v-show的区别:
手段：v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
基于以上区别，因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

原文链接：https://blog.csdn.net/bihaiyanyu/article/details/109216797