在VueJS

Question

基本上，我需要的是一个计算属性，当窗口内部宽度等于或低于768px时返回true，当它高于768px时返回false。

我做了什么：

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

但是只计算一次该属性，如果我稍后调整窗口大小，它对该更改没有反应，我该怎么办？

Answer 1

将eventlistener添加到窗口中，如下所示：

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
    }
  }
})

Answer 2

计算属性仅在其依赖关系发生变化时才会更新，因此这里的isMobile不会被动。