每当元素 clientWidth 更改时，Vue 都会更新数据道具

Posted 2023-02-22

【中文标题】每当元素 clientWidth 更改时，Vue 都会更新数据道具

【英文标题】：Vue update data prop whenever element clientWidth changes

【发布时间】：2021-09-25 07:28:48

【问题描述】：

我目前正在将一个名为 w 的数据属性设置为我在 html 中拥有的元素的 clientWidth 值。在我的挂载钩子中看起来像这样：

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

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

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

【参考方案1】：

要根据应用中的其他变化来获取响应值，请使用计算值而不是 data。假设您的 ref 是指渲染各种时间线的 vue 组件：

computed:
  
    w() 
      return this.$refs.timelineProgress.$el.clientWidth
    
  

【讨论】：

谢谢，我试试看

原来这给出了一个错误：“无法读取未定义的'clientWidth'的属性”这有意义吗？我假设它与生命周期有关并且在计算属性中？

我会调查这些错误，看看我能否让这个解决方案发挥作用！

我不太确定您的 ref 指的是什么，但对于我的用例，我指的是另一个组件。我需要访问它的内部 $el 来获取实际的 DOM 元素，然后它就可以正常工作了。也许这个答案不适用于非组件实例（我假设是这种情况，因为您可以直接从 this.$refs.timelineProgress 获取 clientWidth）。

由于另一个答案可以让您更好地控制去抖动（计算总是在它引用的属性发生变化时运行），因此无需尝试使用这个。

【参考方案2】：

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

created() 
    window.addEventListener('resize', this.resizeHandler);

unmounted() 
    window.removeEventListener('resize', this.resizeHandler);

methods: 
    resizeHandler() 
        this.w = this.$refs.timelineProgress.clientWidth;
    

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

【讨论】：

谢谢，我会考虑这是一个潜在的解决方案并尝试一下

效果很好。感谢您的解决方案！