唯一原因：在调用this.$refs的时候没有生成组件

常用解决方法

mounted时调用

mounted() {console.log(this.$refs.scrollTop)
},

this.$nextTick

mounted() {this.$nextTick(() => {console.log(this.$refs.scrollTop)})
},

setTimeout (不推荐）

mounted() {setTimeout(() => {console.log(this.$refs.scrollTop)},500)
},

特例：

子组件懒加载问题

加载方式

<Scroll ref="scrollTop"></Scroll>components: {
Scroll: () => import("@/components/scroll"),
},

有时候会出现dev的时候能加载上，但是部署之后加载不上，并且只有第一次（没有缓存）打开的时候没有加载到，因为使用ES6懒加载的这种方式引入该组件，会将多个模块的js分割打包，所以改组件不会在页面加载完成的时候全部加载，所以在mounted函数中获取不到对应组件,而且this.$nextTick也获取不到组件。

解决方法

1. update时调用
2. import Scroll from 'components/common/scroll/Scroll.vue' （推荐 - 采用原始的组件引入方式，不采用懒加载）

Vue指令 （v-for，v-if，v-show）

加载方式

<Scroll ref="scrollTop" v-if="isLoading"></Scroll>import Scroll from 'components/common/scroll/Scroll.vue'

v-if等指令，会根据不同的条件去动态的渲染DOM树，因此这些 DOM 在 mounted 阶段是不存在的，在所以使用$refs是不能获取到DOM对象的。

解决办法

1. 将ref 与 vue指令分开使用，不能写在一个DOM上