从已安装的方法更新数据

Question

我有这段代码，其目标是，如果滚动位置大于0，则将数据sticky更新为true

export default {
  components: {
  },
  data() {
    return {
      menuVisible: false,
      sticky: false,
    }
  },
  mounted() {
    this.checkScroll()
  },
  methods: {
    checkScroll() {
      document.querySelector('body').onscroll = function() {
        console.log(window.pageYOffset > 0)
        this.sticky = window.pageYOffset > 0
      }
    },
  },
}

问题是，即使我看到记录了真实的控制台，数据也始终为假（作为初始值）

任何想法为什么不更新它？

Answer 1

这是因为您将回调传递给了滚动侦听器。在您的回调中this不是vue组件的上下文。我认为它的身体实际上。您将需要使用箭头函数或将vue实例作为参数传递给回调。箭头功能最简单。箭头函数保留定义它的上下文，而不继承调用它的对象的上下文。这是有关difference between normal and arrow functions的好帖子/答案。

document.querySelector('body').onscroll = () => {
    console.log(window.pageYOffset > 0)
    this.sticky = window.pageYOffset > 0
}