关于vue中ref的使用(this.$refs获取为undefined)

“关于vue中ref的使用(this.$refs获取为undefined)”这个问题，主要是由于vue的生命周期引起的。在组件的生命周期函数created()回调函数中是无法访问到DOM元素上的ref属性的，当然通过$refs也是无法获取到。因为这个时候组件还未被渲染出来，也就是所使用的DOM元素还不存在。所以，在组件的生命周期函数mounted()回调函数中才可以获取到DOM元素和相应的ref属性。

以下是两条示例说明：

示例1. 纯粹基础案例

template模板代码

<template>
  <div>
    <h3>示例1</h3>
    <div ref="box" class="box">
      这是一个盒子
    </div>
    <p>
      <button @click="changeHandler">改变颜色</button>
    </p>
  </div>
</template>

JavaScript脚本代码

export default {
  methods: {
    changeHandler() {
      let box = this.$refs.box
      console.log(box)
      box.style.backgroundColor = 'red'
    },
  },
}

通过点击“改变颜色”按钮，将会获取到我们的DOM及相应的ref属性，并修改它的背景颜色。

示例2. 带有v-if的组件

template模板代码

<template>
  <div>
    <h3>示例2</h3>
    <div v-if="show" ref="box" class="box">
      这是一个盒子
    </div>
    <p>
      <button @click="show = !show">显示/隐藏</button>
    </p>
  </div>
</template>

JavaScript脚本代码

export default {
  data() {
    return {
      show: true,
    }
  },
  methods: {
    showHandler() {
      let box = this.$refs.box
      console.log(box)
    },
  },
}

通过切换“显示/隐藏”按钮，将会显示或隐藏DOM及相应的ref属性，并获取它的值（hidden状态下无法获取DOM）。注意：因为切换的顺序，这里需要排除this.$refs.box获取为undefined的情况。

综上所述，正确使用$refs应该是在组件的mounted()回调函数中调用。如果是使用了v-if的组件，需要额外注意组件是否已经渲染。