springboot框架和vue框架一样吗（[Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘$refs‘)）

报错：

[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading $refs)"

 背景：1.在做vue项目时
    
    
    
 ，在功能弹框中     


     


     


     ，想实现新增内容
    
    
    
 。

             2. 报错原因是要触发menuCheckall组件后 




 




 




 




，才可以提交

   

   

   

，因为不触发menuCheckall的时候dom未加载     

     

     

     ，没有编译渲染进dom里面     


     


     


     。

1.使用了

this.form.menuIds = this.$refs.menuCheckall.$refs.tree.getCheckedKeys();

其中menuCheckall是子组件 




 




 




 




。

this.$refs[form].validate((valid) => { if (valid) { this.form.menuIds = this.$refs.menuCheckall.$refs.tree.getCheckedKeys(); addOrUpdateRole(this.form).then((res) => { console.log(res); if (res.code == 0) { this.$message.success(提交成功); this.dialogShow = false; this.$emit(call-back); } else { this.$message.error(res.message); } }); } });

2.但是报错了  




  




  




  



，原因是：

mouted加载数据以后


  


  


  


，隐藏的弹出框并没有编译渲染进dom里面

   

   

   

。所以click弹出的时候$refs并没有获取到dom元素导致  undefined     

     

     

     。

对话是一个虚拟dom,visible!==true之前     
     
     
    ，dom未挂载在根节点上   




   




   




   


，导致无法识别  




  




  




  



。

3.解决办法：

在网上查了一些解决方法



 



 



 



，大致有三种：

1）$nextTick dom下一次更新之后

this.$nextTick(()=>{ this.form.menuIds = this.$refs.menuCheckall.$refs.tree.getCheckedKeys(); })

 这种方法虽然可以提交成功                  ，但是还是会报错


  


  


  


。

 2）如果是第一次就点击新增就没必要reset, 根据元素undefined判断

                if (this.$refs.menuCheckall.$refs.tree.getCheckedKeys() !== undefined) {

                    this.form.menuIds =this.$refs.menuCheckall.$refs.tree.getCheckedKeys();

                } 

此种方法仍报错也不可提交    




    




    




    

，不适用于我的情况     
     
     
    。

3）在方法前加了关键字async

这个我没有试

4）最后发现



















，问题在v-if

改为v-show即可

原因：

v-show作用：当用v-show来隐藏元素时                 ，只会在初次加载时渲染此dom节点     



     



     



     
，之后都是通用display来控制显隐



















，如果此时使用v-if
    
    
    
 ，那会频繁的操作dom     


     


     


     ，会极大的影响性能 




 




 




 




，但用display则不会

而v-if作用：当用v-if来隐藏元素时

   

   

   

，初次加载时就不用渲染此dom节点     

     

     

     ，提升页面加载速度