Javascript 如何在Vue.js | window.innerWidth中设置被动窗口参数不是被动的

我的问题是，我必须根据窗口的innerWidth进行一些计算，但每当我更改窗口宽度时，我的计算属性都不会被触发，我如何使其工作

下面是我简化的代码：

var vm = new Vue({
   el: '#elment',
   computed: {
      calculation: function(){
         console.log(window.innerWidth)
         return window.innerWidth;
      }
   }
})

控制台在开始1x上打印宽度。 我如何使其反应？

---

我的另一种方法是在挂载的钩子中的主体中添加一个事件侦听器，并在那里执行我的计算。

此时，VueJS中没有办法以本机方式“监视”窗口属性或使其响应

让我们回顾一下Vue中

EventBus

的一些概念。Vue能够创建另一个与主实例解耦的真正独立的反应式Vue实例。我们通常在启动新的Vue应用程序或创建EventBus时执行此操作

因此，解决方案是创建一个“WindowInstanceMap”。创建一个反应式

innerWidth

数据和一个静默“变异”它的事件侦听器

import Vue from 'vue'

const WindowInstanceMap = new Vue({
  data() {
    return {
      innerWidth: 0
    }
  },
  created() {
    const self = this;
    window.addEventListener('resize', e => {
      self.innerWidth = window.innerWidth
    })
  },
})

export default WindowInstanceMap

有了这个，我们创建了一个窗口界面的克隆，innerWidth是被动的。现在让我们试着在某个地方使用它。 让我们首先在

App.js

中导入该文件，以“初始化”组件：

// App.js
import WindowInstanceMap from './WindowInstanceMap.js'

这将触发

WindowInstanceMap

的

create（）

生命周期，并将调整大小事件侦听器注册到窗口

现在在我的组件中。我们需要做的就是把它映射到一个

computed

prop

// SomeComponent.vue
import WindowInstanceMap from './WindowInstanceMap.js'
export default {
  computed: {
    innerWidth () { return WindowInstanceMap.innerWidth }
  }
}

---

我希望这会有所帮助。

您在安装时向主体添加事件侦听器的想法是正确的。但是如果您有许多与window.innerWidth有关的代码，则可以使用mixin，为多个应用程序共享所需的代码位components@CHANist我想挂载的钩子是一个不错的选择，因为它只是一个代码块。谢谢你，我在

创建的
生命周期中像你一样完成了它，现在它工作正常。我发现了一个错误<在
this.innerWidth
中，code>this
被引用到全局
窗口而不是vue实例，因此我将
this.innerWidth
更改为
WindowInstanceMap.innerWidth
更新，最好将上下文保存在变量中。