vue2 获取动态dom的高度

在Vue.js 2.x中，获取动态DOM高度通常通过计算属性（Computed Property）或者`ref`结合`nextTick`函数来实现。这是因为直接操作DOM可能会触发重渲染，而计算属性会在数据变化后再更新，`nextTick`可以确保在DOM更新完成后再执行回调。

以下是两种常见方法：

1. **使用计算属性**：

<template>
  <div ref="myDiv">这是动态内容</div>
</template>

<script>
export default {
  data() {
    return {
      divHeight: null,
    };
  },
  computed: {
    divHeightComputed() {
      return this.$refs.myDiv ? this.$refs.myDiv.offsetHeight : null;
    }
  },
  mounted() {
    this.divHeight = this.divHeightComputed; // 初始化一次
  },
  updated() {
    this.$nextTick(() => {
      this.divHeight = this.divHeightComputed; // 更新时再获取
    });
  }
}
</script>

2. **使用`ref`配合`nextTick`**：

<template>
  <div ref="myDiv">这是动态内容</div>
</template>

<script>
export default {
  mounted() {
    this.getHeight();
  },
  methods: {
    getHeight() {
      this.$nextTick(() => {
        this.divHeight = this.$refs.myDiv.offsetHeight;
      });
    }
  }
}
</script>

在这两个例子中，`divHeight`变量将保存当前DOM元素的高度。记得在初次挂载、组件更新后或者特定事件（如用户交互）后调用`getHeight`或类似方法来获取高度。