Vue mounted中使用$refs出现undefined的解决方法

Posted 2023-04-17

参考技术A 之前在公司做项目，一直感觉用ref来定位dom节点挺方便的。但是期间遇到了一个问题，就是在mounted()钩子里面使用this.$refs.xxx，打印出来的却是undefined？

DOM结构已经渲染出来了，但是如果在DOM结构中的某个DOM节点使用了v-if、v-show或者v-for（即根据获得的后台数据来动态操作DOM，即响应式），那么这些DOM是不会再mounted阶段找到的。

所以如果在mounted钩子中使用$refs，如果ref是定位在有v-if、v-for、v-show中的DOM节点，这些判断下的DOM还没渲染，返回来的只能是undefined，因为在mounted阶段他们根本不存在！！！

如果说mounted阶段是加载阶段，那么updated阶段则是完成了数据更新到DOM的阶段(对加载回来的数据进行处理)，此时，ref、数据等等全部都挂载到DOM结构上去，在update阶段使用this.$refs.xxx，就100%能找到该DOM节点。

updated与mounted不同的是，在每一次的DOM结构更新，vue都会调用一次updated()钩子函数！而mounted仅仅渲染完成时只执行一次而已。

简单来说，只要在调试的时候，能看到元素的存在，在updated阶段都可以使用this.$refs.xxx找到对应的DOM节点！

ref官宣:

异步组件懒加载 获取不到ref

参考技术A 关键字：获取不到ref，异步组件，$refs
记一次异步组件导致的bug

目前这个bug只在打包环境出现，本地环境不出现，暂时不清楚什么原因

先解释一下什么是 异步组件 ，其实和vue-router的组件懒加载写法一样，只是应用在局部注册中而已

好处的话就是懒加载的好处，可以微略提高一些脚本速度。

由于我写的子组件需要调用组件内的一些methods来进行初始化，因此需要获取子组件的dom。和平常一样在mounted获取ref然后调用子组件的方法， 本地开发环境是没有问题的。
然后上线测试环境，怎么子组件没了，原来是$refs获取不到，子组件没办法初始化。

其实我找了半天，一直把关注点放在ref的获取上，无论怎么调整，加上$nextTick和settimeout都没有用，本地不重现线上重现，最后还是聚焦在子组件上，发现这种引入的方式会导致mounted之后也获取不到子组件的dom，切换回官方的就好了

子组件传出this代替refs获取
使用局部注册的方式

问题找到了，平时还是推荐使用官方推荐的 局部注册的方式 吧，否则需要关注其他注册方式子组件的生命周期是否正确。