Может ли Vue вычислить или посмотреть scrollHeight тела?

Question

Я пытаюсь использовать computed или watch для определения изменения scrollHeight тела, но это не работает.

Вот мой код:

computed: {
    bodyScrollHeight() {
        return document.body.scrollHeight;
    }
},

watch:{
    bodyScrollHeight: function(newValue) {
        this.watchScrollHeight = newValue;
        this.myFunction(newValue);
    }
},

Ссылка на CodePen: https://codepen.io/chhoher/pen/wvMoLOg

Answer 1

Возвращение вычисленного свойства document.body.scrollHeight не сделает его реактивным, вы должны прослушать его другим способом и сообщить Vue об изменении.

Насколько мне известно, единственный способ чтобы узнать, что scrollHeight изменено, нужно опросить его, чтобы вы могли сделать что-то вроде:

new Vue({
  data: () => ({
    scrollHeight: 0,
    interval: null,
  }),

  mounted() {
    this.interval = setInterval(() => {
      this.scrollHeight = document.body.scrollHeight;
    }, 100);
  },

  destroyed() {
    clearInterval(this.interval);
  },

  watch: {
    scrollHeight() {
      // this will called when the polling changes the value
    }
  },

  computed: {
    doubleScrollHeight() {
      // you can use it in a computed prop too, it will be reactive
      return this.scrollHeight * 2;
    }
  }
})