在 Vue2JS 中观察 window.scrollY 和 router :id

Question

所以基本上我可以通过在创建的钩子中添加调整大小的正常 eventListner 并在销毁的钩子中删除它来观看window.scrollY。在调整大小时，我正在检查 window.scrollY，如果它高于或低于 500，我正在更改绑定不同类的布尔变量：

<nav class="navbar u-no-padding"
     v-if="displayedNav"
     :class="minimizedNav ? 'navbar__not-collapsed' : 'navbar__collapsed'">

另外，如果在 url 中有 :id（它是 vue 路由器的一部分），那么我完全隐藏了导航，所以我也使用 v-if 指令。

它工作正常，但后来我意识到我可以使用 vue watch 观看 window.srollY 以便在 window.srollY 高于或低于 500 时更改 data() 中的一些布尔变量

我还可以观看this.$route.params.id，如果已设置，则将this.displayed 更改为false。

所以最后我将有两个观察者来改变布尔值，在这个布尔值上我正在用 nav 做一些事情，如 html 所示。我试图创建它并最终得到

export default {
    data() {
        return {
            minimizedNav: true,
            displayedNav: true,
            buildingId: this.$route.params.id
        }
    },
    watch: {
        'buildingId' : (data) => {
            console.log(data);
            if(data) this.displayedNav = false;
        },
        'window.scrollY' : (data) => {
            console.log(data);
            if(data > 500) this.minimizedNav = false;
            if(data <= 500) this.minimizedNav = true;
        }
    }
}

但它不起作用，我怀疑它会 console.log(data) 在每次更改时数据为 this.$route.params.id 或 buildingId。但这并不能安慰任何事情。为什么，我在这里做错了什么？

Answer 1

Vue 将观察者附加到组件内的所有数据属性（状态），它还会跟踪它的使用位置。

Vue 不会将观察者附加到 window 变量。它仅对其数据和计算属性执行此操作。由于这个原因，您的 window.scrollY 观察者永远不会被调用。

当您监听调整大小的变化时，您之前的解决方案是正确的。

Answer 2

您可以使用computed 代替watch 直接返回您的条件

export default {
    data() {
        return {}
    },

    computed: {
        displayedNav: function() {
            if(this.$route.params.id){
               return false;
            else {
               return true;
            }
        },
        minimizedNav: function() => {
            if(window.scrollY > 500) {
              return false;
            } else {
              return true;
            }
        }
    }
}

在您的模板中使用这样的计算属性。

<nav class="navbar u-no-padding"
     v-if="displayedNav"
     :class="minimizedNav ? 'navbar__not-collapsed' : 'navbar__collapsed'">

Vuejs 建议尽可能使用计算监视

当您有一些数据需要根据其他一些数据进行更改时， 过度使用 watch 很容易——尤其是如果你来自 AngularJS 背景。但是，使用 computed 属性而不是命令式 watch 回调

https://vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property