vue 监听 div 高度

要监听div的高度变化，可以使用Vue的watch和ref属性来实现。具体步骤如下：
1. 在div标签上添加ref属性，例如：ref="myDiv"。
2. 在Vue的data中定义一个变量，例如：divHeight。
3. 在Vue的watch中监听myDiv的高度变化，如果高度发生变化则将新的高度赋值给divHeight变量。

以下是示例代码：

<template>
  <div ref="myDiv">
    // div内容
  </div>
</template>

<script>
export default {
  data() {
    return {
      divHeight: 0
    }
  },
  watch: {
    'myDiv.offsetHeight'(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.divHeight = newVal
      }
    }
  }
}
</script>

相关问题

vue监听div高度变化

在中监听`div`元素高度变化可以通过`Vue`提供的`$refs`属性以及`Vue`提供的`$watch`函数实现。

首先，在`div`元素上添加一个`ref`属性，例如：

<template>
  <div ref="example"></div>
</template>

然后，在组件中定义一个`computed`属性，用于获取`div`元素的高度：

<script>
export default {
  computed: {
    exampleHeight() {
      return this.$refs.example.clientHeight;
    }
  },
  watch: {
    exampleHeight(newHeight, oldHeight) {
      // 处理高度变化
    }
  }
}
</script>

在`computed`中，使用`this.$refs.example`获取`div`元素，并调用`clientHeight`获取元素的高度。然后在`watch`中监听`exampleHeight`的变化，当高度发生变化时执行相应的处理逻辑。

需要注意的是，由于`$refs`属性是在`mounted`钩子函数中才能获取到，因此需要保证`$refs.example`在`computed`和`watch`中都被正确地引用。同时，需要注意`$refs`属性引用的是原生`DOM`元素，而不是`Vue`组件实例，因此不能在`$refs`上直接调用`Vue`组件实例的方法或属性。

vue监听div高度的变化

### Vue 中监听 `div` 元素高度变化

在 Vue 应用程序中，可以通过多种方式监听 `div` 元素的高度变化。以下是几种常见且有效的方法：

#### 方法一：使用 `ResizeObserver`

对于现代浏览器支持的情况，在模板中定义带有 `ref` 属性的元素，并通过 JavaScript 的 `ResizeObserver` API 来监控该元素尺寸的变化。

<template>
  <div ref="elementRef">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    const resizeObserver = new ResizeObserver((entries) => {
      entries.forEach(entry => console.log('Element size:', entry.contentRect));
    });
    
    resizeObserver.observe(this.$refs.elementRef);
  },
  
  unmounted() {
    // 清除观察者以防止内存泄漏
    this.resizeObserver.unobserve(this.$refs.elementRef);
  }
}
</script>

这种方法适用于 Vue 2 和 Vue 3 版本的应用程序[^1]。

#### 方法二：利用样式绑定与计算属性

另一种简单的方式是直接操作样式的内联设置，配合数据模型中的变量来进行响应式调整。

<div :style="{ height: dynamicHeight + 'px' }"></div>

这里的 `dynamicHeight` 可以是一个由其他逻辑控制的数据字段或计算属性[^2]。

#### 方法三：创建自定义指令处理复杂场景

如果项目需求较为特殊，比如列表页面中有动态改变大小的需求，则可以考虑编写一个自定义指令来解决这个问题。这种方式允许更灵活地应对不同情况下的布局变动。

// 定义全局指令 v-resize-watch
app.directive('resize-watch', {
  bind(el, binding) {
    let observer;
    function handleMutation(mutationsList) {
      mutationsList.forEach(mutation => {
        if (mutation.type === "attributes") {
          el.style.height = `${el.scrollHeight}px`;
          typeof binding.value === 'function' && binding.value();
        }
      })
    }

    observer = new MutationObserver(handleMutation);

    observer.observe(el, { attributes: true });

    el.__observer__ = observer;
  },

  unbind(el) {
    el.__observer__.disconnect();
  }
});

此方法特别适合于那些需要精确掌握子节点结构及其尺寸变更的情形[^3]。

#### 方法四：结合生命周期钩子函数确保 DOM 更新同步

考虑到某些情况下可能存在异步渲染的问题，应该借助 Vue 提供的 `nextTick()` 函数等待视图更新完毕之后再去读取最新的尺寸信息。

import { onMounted, ref, nextTick } from 'vue';

setup() {
  const elementRef = ref(null);
  const contentHeights = [];

  onMounted(() => {
    setTimeout(() => {
      nextTick().then(() => {
        Array.from(elementRef.value.children).forEach(childEl => {
          contentHeights.push(childEl.offsetHeight);
        });
      });
    }, 0); // 或者根据实际情况设定延迟时间
  })

  return { elementRef };
}

上述代码片段展示了如何安全可靠地收集一组 `.content` 类型元素的实际高度值[^5]。