Vue中v-show绑定滚动触发变量时元素无法动态隐藏怎么解决？

问题根因 #

代码核心问题是scroll事件回调使用普通function()定义，导致函数内部this指向window对象而非当前Vue组件实例：你在回调中修改的showNav、scrollPos实际是挂载在window上的非响应式属性，根本没有修改到组件data里的响应式变量，Vue检测不到数据变化自然不会更新视图，这就是你控制台打印值看似正常、但v-show始终不生效的原因。

修复方案 #

方案1：将回调改为箭头函数 #

箭头函数不会创建独立的this作用域，会继承外层mounted钩子的this指向（即组件实例），修改的就是响应式data变量：

mounted() {
  this.scrollHandler = () => {
    const rectTop = document.body.getBoundingClientRect().top
    if (rectTop > this.scrollPos) {
      this.showNav = true
    } else {
      this.showNav = false
    }
    this.scrollPos = rectTop
    // 模板中用到了scrollPosition控制样式，这里同步赋值
    this.scrollPosition = Math.abs(rectTop)
  }
  window.addEventListener('scroll', this.scrollHandler)
},
// 组件销毁时必须移除全局事件监听，避免内存泄漏
beforeUnmount() {
  window.removeEventListener('scroll', this.scrollHandler)
},
data() {
  return {
    scrollPosition: null,
    scrollPos: 0,
    showNav: true,
  }
}

方案2：提前存储组件实例指向 #

如果需要用普通函数做回调，可以提前把组件实例存下来使用：

mounted() {
  const vm = this
  this.scrollHandler = function() {
    const rectTop = document.body.getBoundingClientRect().top
    if (rectTop > vm.scrollPos) {
      vm.showNav = true
    } else {
      vm.showNav = false
    }
    vm.scrollPos = rectTop
    vm.scrollPosition = Math.abs(rectTop)
  }
  window.addEventListener('scroll', this.scrollHandler)
},
beforeUnmount() {
  window.removeEventListener('scroll', this.scrollHandler)
},
data() {
  return {
    scrollPosition: null,
    scrollPos: 0,
    showNav: true,
  }
}

内容的提问来源于stack exchange，提问作者elementmg