计算属性对 VueJS 中的 window.innerwidth 反应

Question

基本上，我需要的是一个计算属性，它返回 true 当 window.innerwidth 等于或低于 768px 和 false 高于 itef7’.

我做了什么：

 computed: {
  isMobile() {
    if (window.innerWidth <= 768) {
      return true
    }
    return false
  }
}

但这只会计算该属性一次，如果我稍后调整窗口大小，它不会对更改做出反应。我能做些什么？

原文由 Carlos Pisarello 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

像这样向窗口添加一个事件监听器：

 new Vue({
  el: "#app",
  data() { return { windowWidth: window.innerWidth } },
  mounted() {
    window.addEventListener('resize', () => {
      this.windowWidth = window.innerWidth
      console.log(this.isMobile)
    })
  },
  computed: {
    isMobile() {
      return this.windowWidth <= 768
    }
  }
})

原文由 Get Off My Lawn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

计算属性仅在它们的依赖关系发生变化时更新，因此这里的 isMobile 不会是反应性的。

原文由 Oli Crt 发布，翻译遵循 CC BY-SA 4.0 许可协议