Vue.js $ref问题：$refs含stockRating但直接访问为undefined

问题场景 #

你现在遇到的这个情况我之前也踩过坑！你想通过计算属性动态设置子元素的paddingTop，值基于父元素的高度，代码如下：

<div class="stock-rating positive" ref="stockRating">
  <div class="stock-rating-start-end" v-bind:style="{ paddingTop: paddingTop }">
    <div>{{ rating.value_start }}</div>
    <div>to</div>
    <div>{{ rating.value_end }}</div>
  </div>
</div>

计算属性的代码：

paddingTop : function(){
  console.log(this.$refs); // 能看到stockRating属性
  console.log(this.$refs.stockRating); // 却返回undefined
  /* 计算逻辑 */
}

原因分析 #

这其实是Vue生命周期和浏览器控制台特性共同挖的小坑：

1. 计算属性执行时机太早：计算属性会在组件实例创建后立即求值，此时父元素stockRating可能还没挂载到DOM树上，$refs的绑定还没完成。
2. 浏览器控制台的“延迟展示” trick：你看到console.log(this.$refs)里有stockRating，是因为浏览器控制台会异步更新对象的展示——当你展开对象时，DOM已经挂载完成，$refs已经被填充，但实际执行console.log(this.$refs.stockRating)的瞬间，它确实是undefined。

另外，如果父元素是通过v-if这类条件渲染指令控制的，也会导致$refs.stockRating在条件满足前一直是undefined。

解决方法 #

针对这个场景，有几种靠谱的处理方式：

1. 改用mounted/updated钩子 + $nextTick

计算属性不适合处理依赖DOM的异步逻辑，我们可以在组件挂载完成后，通过$nextTick确保DOM完全渲染，再计算并保存paddingTop到data中：

data() {
  return {
    computedPaddingTop: 0
  }
},
mounted() {
  this.updatePaddingTop()
},
updated() {
  // 如果父元素高度可能动态变化，在updated钩子中重新计算
  this.updatePaddingTop()
},
methods: {
  updatePaddingTop() {
    this.$nextTick(() => {
      const parentEl = this.$refs.stockRating
      if (parentEl) {
        // 这里写你的计算逻辑，比如取父元素高度的一半
        this.computedPaddingTop = `${parentEl.offsetHeight / 2}px`
      }
    })
  }
}

然后模板里改成：

<div class="stock-rating-start-end" v-bind:style="{ paddingTop: computedPaddingTop }">

2. 监听$refs的变化（适合条件渲染场景）

如果父元素是条件渲染的，可以用watch监听$refs.stockRating，当它存在时再执行计算：

data() {
  return {
    computedPaddingTop: 0
  }
},
watch: {
  '$refs.stockRating': {
    immediate: true,
    handler(el) {
      if (el) {
        this.$nextTick(() => {
          this.computedPaddingTop = `${el.offsetHeight / 2}px`
        })
      }
    }
  }
}

3. 优先用CSS方案（如果可行）

如果你的需求只是垂直居中或者基于父元素高度的padding，试试用CSS替代JS，比如flex布局：

.stock-rating {
  display: flex;
  align-items: center;
  /* 或者根据需求调整其他布局属性 */
}

这样既简洁又可靠，完全不需要手动计算padding。

内容的提问来源于stack exchange，提问作者sveti petar