Структура компонента Vue

Каждый компонент должен состоять из двух обязатеьных тегов script и template, и не обязательного тега style:

<script>
// тут следует писать JavaScript код компонента
export default {
  data() {
    return {
      var1: 1,
      var2: 2,
    }
  }
}
</script>

<template>
  // тут следует писать верстку компонента
  {{ var1 + var2 }}
</template>

<style scoped>
// тут следует писать стили компонента
</style>

В теге script следует писать JavaScript код нашего компонента. Код должен представлять собой объект, который будет экспортироваться из нашего файла компонента. В экспортируемом объекте указываются различные настройки и функции компонента.

В теге template следует писать HTML в котором доступны переменные например из тега script с которыми можно выполнять различные действия.

Результатом этого кода будет следующий HTML:

<div id="app">
    3
</div>

В теге style можно будет писать CSS код, при этом он будет применяться только к HTML коду компонента, и не будет применен где-то вовне. Это сделано специально для удобства и достигается за счет атрибута scoped.

Из чего может состоять тег script

1. data для хранения данных, подробнее
2. methods для хранения своих функций, которые на языке Vue называются методы, подробнее
3. computed вычисляемые свойства, подробнее
4. watch асинхронные действия, подробнее
5. mixins повторяющийся код, подробнее
6. name название компонента

Жизненный цикл приложения

В процессе своей работы приложение проходит через ряд этапов, которые составляют жизненный цикл приложения. Кроме того, фреймворк Vue предоставляет ряд специальных методов, с помощью которых мы можем вызвать некоторые действия на различных этапах жизненного цикла приложения.

Весь жизненный цикл приложения Vue 3 можно описать следующим образом:

1. Вызывается функция Vue.createApp() и метод mount(). Сначала происходит инициализация приложения Vue.

2. Сразу после инициализации приложения, но до установки свойств, методов и обработчиков событий объектов приложения вызывается метод beforeCreate ().

3. Далее происходит создание объекта Vue, установка его свойств, обработчиков событий и прочих методов

4. После создания объекта приложения Vue и установки всех свойств и методов вызывается метод created (). На этом этапе еще не произошло прикрепление объекта приложения Vue к элементу html веб-страницы.

5. Далее выполняется компиляция шаблона — валидную разметку с кодом html, которая представляет приложение Vue и внутри которой приложение будет работать.

6. Вызывается метод beforeMount ().

7. Элемент html, который передается в метод mount в Vue.createApp({}).mount(), заменяется скомпилированным шаблоном.

8. Сразу после прикрепления приложения Vue к элементу html, вызывается метод mounted (), и после этого шаблон считается прикрепленным к DOM, и мы можем с ним работать

9. Если в процессе работы мы обновляем данные приложения Vue, то происходит еще ряд событий:

   1. Данные изменяются

   2. Вызывается метод beforeUpdate ()

   3. Производится повторный рендеринг DOM для его соответствия виртуальному DOM

   4. Вызывается метод updated (). DOM на веб-странице обновлен, и мы продолжаем работать с приложением Vue

10. При откреплении объекта приложения Vue вызывается метод beforeUnmount ()

11. И после открепления приложения Vue от html-страницы вызывается метод unmounted ().