Предыдущие и текущие данные в Vue Life Hooks

Question

Как я могу получить предыдущие и текущие данные в обновленном хуке (похоже на React)? Я хочу прокрутить список элементов до самого низа, и для этого мне нужно:

• уже обработанный обновленный DOM (поэтому я хочу использовать обновленный хук для вычисления прокрутки)
• информация, прокручивать или нет (прокручивать только когда номер текущего элементы больше предыдущего).

Я понял что-то вроде этого:

  name: "list",
  props: ["elements"],
  data() {
    return {
      scrollBottom: false
    };
  },
  updated() {
    if (this.scrollBottom) {
      window.scroll(0, this.$root.$el.scrollHeight); /* full window / app height list*/
    }
  },
  watch: {
    elements(current, prev) {
      this.scrollBottom = current.length > prev.length;
    }
  }

Я не уверен, является ли это «правильным» подходом, но ловушки Vue не получают никакой информации о предыдущих данных. Могу ли я сделать это лучше? Спасибо за любую помощь.

EDIT Я нашел эту полезную тему: ссылка . По-видимому, лучший способ справиться с этим - использовать метод. $ NextTick.

Answer 1

Я мог бы написать что-то вроде этого:

{
  name: "list",
  props: ["elements"],
  data() {
    return {
      // scrollBottom no needs here
    };
  },
  methods: {
     scrollToBottom() {        
       window.scroll(0, this.$root.$el.scrollHeight); /* full window / app height list*/
    }
  },
  watch: {
    elements(current, prev) {
      if (current.length > prev.length)
         this.scrollToBottom();
    }
  }
}

В методе часов используйте scrollToBottom напрямую

Answer 2

Ну, в Vue официальные документы , они упомянуты ниже:

обновлен Hook

DOM компонента будет обновляться при вызове этой ловушки, поэтому вы можете выполнять зависимые от DOM операции здесь. Однако в большинстве случаев вам следует избегать изменения состояния внутри хука. Чтобы реагировать на изменения состояния, обычно лучше вместо этого использовать вычисляемое свойство или наблюдатель.

Надеюсь, это поможет!