javascript - 页面重新加载时计算属性中的 window.scrollY 为 0，在热重载时工作正常

Question

<div id="component-navbar" :class="hasBackground">

computed: {
  hasBackground() {
    if (window.scrollY > 0) {
      return 'has-background'
    }
  }
}

我有一个粘性导航栏，如果页面滚动大于 0，我想添加背景。问题是，hasBackground

1. 滚动变化时不会重新计算
2. 页面刷新时，即使页面滚动，window.scrollY 始终为零
3. 仅在对文件进行更改时才适用于热重载。

我该怎么做？

Answer 1

正如@obermillerk所说:

The window object cannot be observed properly in vue.

所以你有两个选择:

1. 在组件初始化时读取 window.scrollY。
2. 添加window.addEventListener('scroll', ..., { Passive: true })。

组件初始化时读取window.scrollY

Vue.component('component-navbar', {
  computed: {
    hasBackground () {
      console.log('window.scrollY', window.scrollY)
      if (window.scrollY > 0) {
        return 'has-background'
      }
    }
  },
  template: '<nav :class="hasBackground"></nav>'
})

const app = new Vue({
  el: '#app'
})

#app {
  min-height: 110vh;
}
nav {
  min-height: 50vh;
}
nav.has-background {
  background: linear-gradient(red, orange);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<article id="app">
  <component-navbar></component-navbar>
</article>

添加window.addEventListener('scroll', ..., { Passive: true })

Vue.component('component-navbar', {
  data () {
    return {
      isScrolled: false
    }
  },

  computed: {
    hasBackground () {
      if (this.isScrolled) {
        return 'has-background'
      }
    }
  },

  template: '<nav :class="hasBackground"></nav>',

  mounted () {
    window.addEventListener('scroll', this.setIsScrolled, { passive: true })
    this.setIsScrolled()
  },

  destroyed () {
    window.removeEventListener('scroll', this.setIsScrolled, { passive: true })
  },

  methods: {
    setIsScrolled () {
      this.isScrolled = window.scrollY > 0
    }
  },
})

const app = new Vue({
  el: '#app'
})

#app {
  min-height: 110vh;
}
nav {
  min-height: 50vh;
}
nav.has-background {
  background-image: linear-gradient(red, orange);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<article id="app">
  <component-navbar></component-navbar>
</article>