javascript - 每当元素 clientWidth 更改时，Vue 更新数据属性

Question

我目前正在将名为 w 的数据属性设置为我在 HTML 中拥有的元素的 clientWidth 值。在我安装的钩子(Hook)中看起来像这样:

data() {
 return {
  w: 0,
 };
},
mounted() {
  this.w = this.$refs.timelineProgress.clientWidth;
},

这对于初始设置 this.w 元素的 clientWidth 宽度效果很好，但我现在要做的是在 clientWidth 发生变化时更改 w 的值。这样我就可以获取元素的宽度，并在它根据设备屏幕尺寸缩小或增大时存储它，或者如果用户缩小页面或类似的东西。

非常感谢任何解决此问题的帮助。谢谢。

Answer 1

您或许可以尝试使用 created和 unmounted方法将窗口调整大小事件附加到您的组件。

created() {
    window.addEventListener('resize', this.resizeHandler);
}
unmounted() {
    window.removeEventListener('resize', this.resizeHandler);
}
methods: {
    resizeHandler() {
        this.w = this.$refs.timelineProgress.clientWidth;
    }
}

在 resizeHandler 方法中，您还可以对状态更新进行去抖动以提高性能。