Для чего нужен updated?

Для чего нужен updated

updated — это lifecyle hook (жизненный цикл) в Vue.js, который выполняется после того, как компонент обновился и его реактивные данные изменились, а DOM перерендерился.

Это один из важнейших hooks в Vue, который часто используется для реакции на изменения данных.

Что такое lifecycle hooks в Vue

Lifecycle — это стадии жизни компонента от создания до удаления. Vue предоставляет hooks (перехватчики) на каждой стадии:

Before Create → Created → Before Mount → Mounted 
→ Before Update → Updated → Before Unmount → Unmounted

updated hook

updated выполняется после каждого обновления компонента — когда:

• Реактивное свойство (data) изменилось
• Props изменились
• Вычисляемое свойство (computed) изменилось
• Компонент перерендерился

// Vue 3 Composition API
import { ref, watch, onUpdated } from 'vue';

export default {
  setup() {
    const count = ref(0);
    
    // updated вызывается каждый раз при изменении count
    onUpdated(() => {
      console.log('Компонент обновился! Текущий count:', count.value);
    });
    
    return { count };
  }
};

// Vue 2 Options API
export default {
  data() {
    return { count: 0 };
  },
  updated() {
    console.log('Компонент обновился');
  }
};

Практические примеры использования updated

Пример 1: Синхронизация данных с внешним хранилищем

// Vue 3
export default {
  setup() {
    const formData = ref({ name: '', email: '' });
    
    onUpdated(() => {
      // Сохраняем в localStorage при каждом изменении формы
      localStorage.setItem('form', JSON.stringify(formData.value));
    });
    
    return { formData };
  }
};

Пример 2: Обновление интегрированной библиотеки

// При обновлении данных, обновляем граф в библиотеке D3.js
import * as d3 from 'd3';

export default {
  data() {
    return { chartData: [] };
  },
  
  updated() {
    // Каждый раз когда chartData изменился, перерисовываем граф
    this.updateChart();
  },
  
  methods: {
    updateChart() {
      const svg = d3.select(this.$refs.chart);
      // Логика обновления графика
      svg.selectAll('circle')
        .data(this.chartData)
        .join('circle')
        .attr('cx', d => d.x)
        .attr('cy', d => d.y);
    }
  }
};

Пример 3: Фокус на новый элемент

// При добавлении нового item'а в список, фокусируем новый input
export default {
  data() {
    return { items: [] };
  },
  
  updated() {
    // Фокусируем последний input
    const inputs = this.$refs.itemInputs;
    if (inputs.length > 0) {
      inputs[inputs.length - 1].focus();
    }
  },
  
  methods: {
    addItem() {
      this.items.push({ text: '' });
      // Автоматически фокусируется новый input благодаря updated()
    }
  }
};

Пример 4: Отслеживание специфичных изменений

export default {
  data() {
    return {
      searchQuery: '',
      results: []
    };
  },
  
  updated() {
    // Логируем только если results изменились
    if (this.results.length > 0) {
      console.log(`Найдено ${this.results.length} результатов`);
      // Прокручиваем список вверх
      this.$refs.resultsList?.scrollTop = 0;
    }
  }
};

updated vs watch

Часто путают updated и watch. Вот различия:

// updated — реагирует на ВСЕ обновления компонента
export default {
  data() {
    return { count: 0, name: '' };
  },
  updated() {
    console.log('Компонент обновился (count или name изменились)');
  }
};

// watch — реагирует на КОНКРЕТНОЕ свойство
export default {
  data() {
    return { count: 0, name: '' };
  },
  watch: {
    count(newVal) {
      console.log('count изменился на:', newVal);
      // Вызывается ТОЛЬКО когда count меняется
    },
    name(newVal) {
      console.log('name изменился на:', newVal);
      // Вызывается ТОЛЬКО когда name меняется
    }
  }
};

// Когда использовать что:
// updated: Нужно реагировать на обновление DOM или несколько свойств
// watch: Нужно реагировать на изменение конкретного свойства

updated vs mounted

Различие в моменте выполнения:

export default {
  data() {
    return { count: 0 };
  },
  
  mounted() {
    console.log('1. Компонент смонтирован (один раз)');
    // Выполняется ОДИН раз при создании компонента
    // Используется для инициализации
  },
  
  updated() {
    console.log('2. Компонент обновился');
    // Выполняется КАЖДЫЙ раз при изменении данных
    // Используется для реакции на изменения
  },
  
  methods: {
    increment() {
      this.count++; // updated выполнится
    }
  }
};

// Результат при increment():
// console.log: "2. Компонент обновился"

Практический пример: Chat компонент

export default {
  data() {
    return {
      messages: [],
      newMessage: ''
    };
  },
  
  updated() {
    // Прокручиваем чат вниз при новом сообщении
    const chatContainer = this.$refs.chatMessages;
    if (chatContainer) {
      chatContainer.scrollTop = chatContainer.scrollHeight;
    }
  },
  
  methods: {
    sendMessage() {
      this.messages.push({
        text: this.newMessage,
        sender: 'me',
        timestamp: new Date()
      });
      this.newMessage = '';
      // updated() автоматически прокрутит чат вниз
    }
  },
  
  template: `
    <div ref="chatMessages" class="chat">
      <div v-for="msg in messages" :key="msg.timestamp">
        {{ msg.text }}
      </div>
    </div>
  `
};

Важные замечания

1. updated вызывается ПОСЛЕ re-render'а

export default {
  data() { return { count: 0 }; },
  
  updated() {
    // В этот момент DOM уже обновлен
    // Можно работать с актуальными элементами
    this.$refs.countDisplay.innerHTML; // Это уже новое значение
  },
  
  methods: {
    increment() {
      this.count++; // План: re-render + updated()
    }
  }
};

2. Избегай бесконечных循环 (infinite loops)

// ❌ ПЛОХО: бесконечный цикл
export default {
  data() { return { count: 0 }; },
  updated() {
    this.count++; // Каждое обновление вызывает новое обновление!
    // updated() -> count++ -> обновление -> updated() -> count++ -> ...
  }
};

// ✅ ХОРОШО: условная логика
export default {
  data() { return { count: 0 }; },
  updated() {
    if (this.count > 100) {
      this.count = 0; // Сбрасываем при условии
    }
  }
};

3. updated вызывается для каждого child компонента

// Parent.vue
<template>
  <Child :data="data" />
</template>

export default {
  data() { return { data: 0 }; },
  updated() {
    console.log('Parent обновился');
  }
};

// Child.vue
export default {
  props: ['data'],
  updated() {
    console.log('Child обновился'); // Вызовется когда props.data изменится
  }
};

// При изменении data:
// console.log: "Parent обновился"
// console.log: "Child обновился"

Vue 2 vs Vue 3

Vue 2 (Options API):

export default {
  updated() {
    console.log('Компонент обновился');
  }
};

Vue 3 (Composition API):

import { onUpdated } from 'vue';

export default {
  setup() {
    onUpdated(() => {
      console.log('Компонент обновился');
    });
  }
};

Когда использовать updated

Используй updated для:

• Синхронизации с внешними библиотеками (D3, Chart.js, Leaflet)
• Управления фокусом (например, фокус на новый input)
• Прокрутки списка (scroll to bottom в чатах)
• Сохранения состояния в localStorage
• Аналитики (отслеживание обновлений)

НЕ используй updated для:

• Асинхронных операций (используй watch/computed вместо этого)
• Обработки initial data (используй mounted)
• Часто повторяющихся операций (может быть медленно)

Оптимизация

// Если updated вызывается слишком часто, добавь debounce
import { debounce } from 'lodash';

export default {
  data() {
    return { count: 0 };
  },
  
  updated: debounce(function() {
    // Это выполнится только один раз за 300ms
    console.log('Обновление завершено:', this.count);
  }, 300)
};

Вывод

updated — это lifecycle hook, который выполняется после каждого обновления компонента.

Он полезен для:

• Реакции на изменения данных
• Синхронизации с DOM-элементами
• Интеграции с внешними библиотеками
• Управления фокусом и прокруткой

Главное — помнить, что updated вызывается часто (при каждом обновлении), поэтому логика должна быть быстрой и без побочных эффектов, которые вызовут новые обновления.