vue 监听 offsetheigh变化

在Vue中监听offsetHeight变化的方法很简单。我们可以利用Vue提供的watch选项来监测data中的offsetHeight属性的变化。

首先，在Vue组件的data中定义一个名为offsetHeight的属性，并赋予初始值，例如0。

接下来，我们在Vue组件的watch选项中添加一个名为offsetHeight的监测器。监测器的回调函数会在offsetHeight属性的值发生变化时被调用。回调函数的参数为新值和旧值。

在回调函数中，我们可以进行一些自定义的逻辑处理，例如发送请求、更新其他数据等。这里以打印新旧值为例。

最后，我们在需要监听offsetHeight变化的元素上使用ref属性，将其关联到Vue组件中。在mounted钩子函数中，我们可以通过this.$refs获取到关联元素，并通过offsetHeight属性获取到其高度值。当元素的高度发生变化时，watch选项中的监测器函数将被调用。

下面是一个示例代码：

<template>
<div ref="myElement">
监听offsetHeight变化的元素
</div>
</template>

<script>
export default {
data() {
return {
offsetHeight: 0
}
},
watch: {
offsetHeight(newValue, oldValue) {
console.log('offsetHeight变化：', newValue, oldValue)
}
},
mounted() {
const myElement = this.$refs.myElement
this.offsetHeight = myElement.offsetHeight
}
}
</script>

这样，当我们通过改变元素的高度来改变offsetHeight时，watch选项中的监测器函数将被调用并打印出新旧值。