javascript - Nuxt - 窗口内宽的吸气剂不更新

Question

我们的项目使用基于类的组件。我有一个获取窗口内部宽度的吸气剂，但该值仅设置一次，如果我更改窗口宽度，它不会更新。

get viewPortWidth() {
  
    if (process.client) {
          if (window.innerWidth !== undefined && window.innerHeight !== undefined) {
            return window.innerWidth;
          } else {
            return document.documentElement.clientWidth;
          }
        }
        return false; 
  }

如果我在 html 中写入值：{{viewPortWidth}}它不会改变。在 vue devtools 中该值也是相同的。getter 不应该像计算属性一样工作吗？我怎样才能无缝更新？

标签： javascriptvue.jsnuxt.js

Answer 1

vue 计算属性基于它们的反应依赖进行缓存。window.innerWidth 不是反应性依赖。

您可以通过在“已创建”生命周期挂钩中添加事件侦听器来跟踪更改窗口大小事件，如下所示：

created(){window.addEventListener('resize', (e)=>{console.log(e)})}