Vue报错Cannot read properties of undefined (reading '$refs')，是否必须用mounted钩子？

算力阿峰

2026-8-2

问题解答

不一定非要用mounted钩子，但必须等组件挂载完成、DOM渲染好之后，才能访问$refs。

你现在的代码直接在<script>根级调用this.$refs.input，这时候组件还没完成挂载，DOM元素还没被创建，$refs里自然找不到对应的元素，所以会报错「Cannot read properties of undefined (reading '$refs')」。

常见解决方案

使用mounted钩子（最常用）
mounted是Vue组件生命周期中，组件挂载完成、DOM已渲染完成的钩子，此时$refs已经被正确赋值：

<div class="input-wrapper">
   <input type="text" id="phone" placeholder="(555) 555-5555" ref="input"/>
</div>

<script>                   
export default {
  mounted() {
    this.$refs.input.addEventListener('input', function () {
      // 你的业务代码
    });
  }
}
</script>

Vue 3组合式API的写法
如果用<script setup>，可以用onMounted钩子，或者直接监听ref变量：

<template>
  <div class="input-wrapper">
     <input type="text" id="phone" placeholder="(555) 555-5555" ref="input"/>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const input = ref(null)

onMounted(() => {
  input.value.addEventListener('input', () => {
    // 你的业务代码
  })
})
</script>

动态渲染元素的情况
如果你的输入框是通过v-if等指令动态显示的，需要用$nextTick等待DOM更新后再访问，或者监听ref的变化：

export default {
  data() {
    return {
      isInputShow: false
    }
  },
  methods: {
    async toggleInput() {
      this.isInputShow = true
      // 等待DOM更新完成
      await this.$nextTick()
      this.$refs.input.addEventListener('input', () => {
        // 你的业务代码
      })
    }
  }
}