问题:如何在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()生命周期,并将resize事件监听器注册到window。

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

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

我希望这有帮助。