---

前言

Vue中在mounted中通过this.$refs但是获取不到属性的几种常见情况分析。

---

一、使用this.$refs 获取的组件使用了组件懒加载

<Scroll ref="scrollTop"></Scroll>

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

分析：使用ES6懒加载的这种方式引入该组件，会将多个模块的js分割打包，所以改组件不会在页面加载完成的时候全部加载，所以在mounted函数中获取不到对应组件。

解决办法：：采用原始的组件引入方式，不采用懒加载。

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 或者 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 钩子函数仅仅只执行一次而已。
• 我们也可以和 $nextTick结合使用，$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的 DOM。

---

总结

这篇文章主要给大家分析了Vue中在mounted中通过this.$refs但是获取不到属性的几种常见情况，给出了一些个人的解决办法和思路，希望对大家有所帮助。