vue中this.$refs.name.offsetHeight获取不到值问题

问题背景：

在vue开发中，有时候我们需要获取某个元素或者组件的高度值，利用this.$refs.name.offsetHeight是个非常简便的方式，但是它并不总是奏效，许多开发者在这种情况下却无法获取到对应的高度值，究竟是为什么呢？

解决方案：

经过笔者的实践和总结，出现这种问题的情况大多是因为元素或组件还没有被渲染到Dom树上，因此高度值无法获取。针对这种情况的解决方案有一下两种：

1. 使用vm.$nextTick()方法

Vue.js提供了vm.$nextTick(callback)方法，在DOM更新队列完成更新后执行延迟回调，在回调中就可以进行DOM操作了，同时也可以准确的获取到对应的高度值。例如下面的示例：

<template>
  <div class="container" ref="container">
    <p ref="text">这是一段文本</p>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.$nextTick(() => {
        console.log(this.$refs.text.offsetHeight)
      })
    }
  }
</script>

1. 使用Vue指令v-if or v-show

使用v-if指令，可以控制元素或组件的渲染时机，保证元素渲染时，高度值已经被计算好了。例如下面的示例：

<template>
  <div>
    <div v-if="show" ref="box">这是一个盒子</div>
    <button @click="handleClick">点击我显示盒子</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      }
    },
    methods: {
      handleClick() {
        this.show = true
        this.$nextTick(() => {
          console.log(this.$refs.box.offsetHeight)
        })
      }
    }
  }
</script>

以上两种方法都可以解决在vue中this.$refs.name.offsetHeight获取不到值问题，开发者可以根据需求自行选择使用。