一、使用this.$refs 获取的组件使用了组件懒加载
<Scroll ref="scrollTop"></Scroll>
components: {
Scroll: () => import("@/components/scroll"),
},
分析：使用ES6懒加载的这种方式引入该组件，会将多个模块的js分割打包，所以改组件不会在页面加载完成的时候全部加载，所以在mounted函数中获取不到对应组件。
解决办法：：采用原始的组件引入方式，不采用懒加载。
import Scroll from 'components/common/scroll/Scroll.vue'
1
二、和Vue指令同用比如（v-for，v-if，v-show等）
<Scroll ref="scrollTop" v-if="isLoading"></Scroll>
import Scroll from 'components/common/scroll/Scroll.vue'
分析：比如使用了v-if 或者 v-show 这些指令的前提下，使用this.$refs 获取DOM，会出现一个
Error in updated hook: "TypeError: Cannot read property 'style' of undefined"
这样的报错，因为v-if等指令，会根据不同的条件去动态的渲染DOM树，因此这些 DOM 在 mounted 阶段是不存在的，在所以使用$refs是不能获取到DOM对象的。
解决办法：：将ref 与 vue指令分开使用，不能写道一个DOM上
三、调用时机不对
mounted 阶段是加载阶段，有些DOM可能存在还没有完成的情况， updated 阶段则是完成了数据更新到 DOM 的阶段(对加载回来的数据进行处理)，此时，再使用 this.$refs.xx，就 100% 能找到该 DOM 节点。
updated 与 mounted 不同的是，在每一次的 DOM 结构更新，Vue.js 都会调用一次 updated 钩子函数，而 mounted 钩子函数仅仅只执行一次而已。
我们也可以和 n e x t T i c k 结 合 使 用 ， nextTick结合使用，nextTick结合使用，nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的 DOM。