Как проверить, какие данные запускаются обновляются в Vue?

Question

updated: function() {
    console.log("updated");
    this.$emit("render-vue", this.$el.offsetHeight);
  },

Это работает достаточно хорошо ... но в моем приложении props обновляется (что меня не волнует), а затем есть fetch(), который обновляет data, что приводит к дополнительнымРендеринг DOM.

Итак, это значит, что я получаю 2 'обновленных' событий подряд!100

По сути, я только хочу, чтобы updated выполнил $emit, когда data был полностью обновлен и DOM завершен.

В настоящее время $emit происходит 2 раза подряд, и это не помогает ситуации - IT DOM обновляется с помощью props, а затем сразу после этого появляется updated, когда data обновляется после fetch().

Теперь я могу watch - попробовал это.Проблема в том, что $emit сработает до того, как весь DOM будет updated, отправив неверную информацию в качестве аргумента .

Это почти как если бы мне нужно watch определенный кусокdata ... и затем, и только тогда, пусть updated отправит $emit.10

Для дополнительного контекста нет children - это компонент child .

Я могу , вероятно, заставить это работать, используя setTimeout() ... но давай, давай!Это неряшливо!??

Answer 1

В блоке кода, который выбирает данные, установите свойство, указывающее, что новые данные доступны

fetch(url)
    .then(() => {
        // whatever you're doing with the data
        this.newData = true;
    });

Проверьте эту переменную состояния в updated ловушке

updated() {
    if (this.newData) {
        this.$emit("render-vue", this.$el.offsetHeight);
        this.newData = false;
    }
}