Vue Mounted

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

Пример использования хука mounted:

javascript
new Vue({
  el: '#app',
  mounted: function() {
    // Выполняет инициализацию компонента после добавления в DOM
    this.getDataFromAPI();
  },
  methods: {
    getDataFromAPI: function() {
      // Выполняет запрос к API и получает данные
      // ...
    }
  }
})

В данном примере, после добавления экземпляра Vue в DOM (указанного в атрибуте `el`), метод `mounted` будет вызван. В результате вызова будет выполнена инициализация компонента. Здесь мы можем выполнить такие действия, как отправка запросов к API, получение данных, инициализацию плагинов и т.д.

Хук `mounted` позволяет нам обрабатывать действия, которые требуют доступа к DOM элементам. К тому времени, когда `mounted` вызывается, реактивность Vue уже установлена и экземпляр Vue полностью скомпилирован.

Например, если у вас есть компонент, который отображает список пользователей после получения данных из API, вы можете использовать `mounted` для выполнения запроса и добавления данных в реактивное свойство:

javascript
new Vue({
  el: '#app',
  data: {
    users: []
  },
  mounted: function() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers: function() {
      axios.get('/api/users')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
})

В этом примере, `mounted` вызывает метод `fetchUsers`, который выполняет запрос к API `/api/users` и сохраняет полученные данные в свойство `users`. Затем свойство `users` автоматически обновляет DOM, отображая список пользователей.