Как использовать жизненный цикл компонента в Vue.js?

Пользователь

от vladimir , в категории: JavaScript , 9 месяцев назад

Как использовать жизненный цикл компонента в Vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от jerrold_langworth , 7 месяцев назад

@vladimir 

Жизненный цикл компонента в Vue.js означает последовательность событий, которые происходят при создании, изменении и удалении компонента.


Для использования жизненного цикла компонента в Vue.js можно использовать следующие методы:

  1. beforeCreate - вызывается до создания экземпляра компонента и позволяет производить какие-то действия перед инициализацией.
  2. created - вызывается после создания экземпляра компонента и позволяет производить инициализацию компонента, например, устанавливать начальные значения переменных.
  3. beforeMount - вызывается перед монтированием компонента на страницу и позволяет производить какие-то действия перед отрисовкой компонента.
  4. mounted - вызывается после монтирования компонента на страницу и позволяет производить какие-то действия после отрисовки компонента.
  5. beforeUpdate - вызывается перед обновлением компонента и позволяет производить какие-то действия перед обновлением данных компонента.
  6. updated - вызывается после обновления компонента и позволяет производить какие-то действия после обновления данных компонента.
  7. beforeDestroy - вызывается перед удалением компонента и позволяет производить какие-то действия перед удалением компонента.
  8. destroyed - вызывается после удаления компонента и позволяет производить какие-то действия после удаления компонента.


Пример использования жизненного цикла компонента:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<template>
  <div>
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
    this.text = 'Hello, World!'
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  },
  data() {
    return {
      text: ''
    }
  }
}
</script>


В данном примере компонент выводит на странице текст, который устанавливается в методе created.


В консоли можно увидеть, что жизненный цикл компонента начинается с вызова метода beforeCreate, затем created, beforeMount и mounted. При изменении переменной text вызываются методы beforeUpdate и updated. При удалении компонента вызываются методы beforeDestroy и destroyed.