@vladimir
Жизненный цикл компонента в Vue.js означает последовательность событий, которые происходят при создании, изменении и удалении компонента.
Для использования жизненного цикла компонента в Vue.js можно использовать следующие методы:
Пример использования жизненного цикла компонента:
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.