在 Vue2JS 中观看 window.scrollY 和路由器 :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 为上或时更改 data() 中的一些布尔变量低于 500

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

所以最后我会有两个观察者，它们会改变布尔值，在这个布尔值上，我正在用导航做一些事情，如 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

相反 watch 你可以使用 computed 来 return 你的条件直接像这样

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 建议尽可能使用 computed over watch

When you have some data that needs to change based on some other data, it is tempting to overuse watch - especially if you are coming from an AngularJS background. However, it is often a better idea to use a computed property rather than an imperative watch callback

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

在 Vue2JS 中观看 window.scrollY 和路由器 :id

Watch window.scrollY and router :id in Vue2JS

vue.js

vuejs2

resize

addeventlistener

watch