关键字：获取不到ref，异步组件，$refs
记一次异步组件导致的bug
目前这个bug只在打包环境出现，本地环境不出现，暂时不清楚什么原因
先解释一下什么是异步组件，其实和vue-router的组件懒加载写法一样，只是应用在局部注册中而已
export default {
components: {
MdChart: () => import('@/components/子组件')
},
}
好处的话就是懒加载的好处，可以微略提高一些脚本速度。
bug出现
由于我写的子组件需要调用组件内的一些methods来进行初始化，因此需要获取子组件的dom。和平常一样在mounted获取ref然后调用子组件的方法， 本地开发环境是没有问题的。
然后上线测试环境，怎么子组件没了，原来是$refs获取不到，子组件没办法初始化。
定位
其实我找了半天，一直把关注点放在ref的获取上，无论怎么调整，加上$nextTick和settimeout都没有用，本地不重现线上重现，最后还是聚焦在子组件上，发现这种引入的方式会导致mounted之后也获取不到子组件的dom，切换回官方的就好了
解决
子组件传出this代替refs获取
使用局部注册的方式
总结
问题找到了，平时还是推荐使用官方推荐的局部注册的方式吧，否则需要关注其他注册方式子组件的生命周期是否正确。
网友评论