JavaScript

Vue JS: функции, события и жизненный цикл. Базовая терминология

Lorem ipsum dolor

В Vue JS, как и во многих языках программирования или фреймворках, есть своя терминология и свои понятия. Сегодня мы разберемся с такими терминами в Vue JS, как «функции», «события» и «жизненный цикл».

 

Функции в Vue JS

Функции в Vue JS налаживают отношения между компонентами кода. Отношение между компонентами означает, что когда в одном из компонентов происходит какое-то изменение, то это может повлечь изменение в другом компоненте или может повлечь выполнение какого-то действия на странице.

Функции в Vue JS — это специальный тип объектов, который позволяет силами фреймворка определять логику поведения компонентов HTML-страницы. По сути, функция — это небольшой фрагмент скрипта, который задается идентификатором, при помощи которого к данной функции можно обратиться из любого места программы. После вызова функции она вступает в управление и выполняет какие-то действия, а после его выполнения она возвращает программе «управление» с того места, где была вызвана.

Функции в Vue JS выполняют роль «кирпичиков», они позволяют применять один и тот же «кусок кода» во многих местах программы, при этом не дублируя сам код.

Функции в Vue JS:

  • должны быть правильным образом объявлены и определены;

  • могут быть вызванными в любом месте программы;

  • способны принимать любые значения;

  • должны возвращать какое-то значение;

  • могут определять собственную область видимости;

  • могут быть вызваны другими функциями.

 

События в Vue JS

События в Vue JS — это сигнал от обозревателя программы о том, что произошло какое-то действие. 

Самые распространенные события в Vue JS:

  • «click» данное событие означает, что по заданному элементу произошел левый «клик» мышью;

  • «contextmenu» данное событие означает, что по заданному элементу произошел правый «клик» мышью;

  • «mouseover» или «mouseout» события в Vue JS, которые означают, что курсор наводится или покидает заданный элемент;

  • «mousedown» или «mouseup» события в Vue JS, которые означают, что на заданный элемент нажали или отжали мышью;

  • «submit» событие, которое показывает, что произошла отправка формы;

  • и др.

Событий в Vue очень много. Каждому событию обычно назначается обработчик событий. Обработчик — это некая функция, которая сразу сработает, как только произойдет какое-то событие, связанное с конкретным элементом. В Vue JS для обработки событий часто применяется директива «v-on». По синтаксису после нее сразу идет двоеточие, а после него указывается событие, которое нужно обработать, и действие, что нужно сделать. Например:

 v-on:submit=“какое-то действие“

 

Жизненный цикл в Vue JS

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

Жизненный цикл приложения в Vue JS:

  1. Идет вызов конструктора new Vue().

  2. Перед тем как создается объект, происходит вызов метода beforeCreate().

  3. Объект Vue JS проходит инициализацию, также происходит установка его данных и методов.

  4. После того как объект создан, происходит вызов метода created().

  5. Компилируется шаблон.

  6. Происходит вызов метода beforeMount().

  7. Происходит замена html-элемента, за которым закреплен объект Vue, на скомпилированный шаблон.

  8. Происходит вызов метода mounted(), это провоцирует прикрепление шаблона к DOM, а значит, можно работать с этим шаблоном.

  9. Происходят обновления данных объекта Vue, если это необходимо.

  10. Вызывается метод beforeDestroy(), чтобы завершить работу программы.

  11. Вызывается метод destroyed(), что провоцирует удаление объекта Vue из памяти, а это означает, что больше с ним нет возможности взаимодействовать.

 

Заключение

Вы познакомились с такими терминами, как «функции», «события» и «жизненный цикл» в Vue JS. Более подробно на работе с этим фреймворком мы будет останавливаться в следующих наших статьях.

Схожие статьи

Оформляем красивый код JS. Как очистить свой код от лишнего мусора?
JavaScript

Оформляем красивый код JS. Как очистить свой код от лишнего мусора?

Учебный курс по React, часть 6: о некоторых особенностях курса, JSX и JavaScript
JavaScript

Учебный курс по React, часть 6: о некоторых особенностях курса, JSX и JavaScript

Для чего нужен JavaScript, какие плюсы и минусы, где применяется?
JavaScript

Для чего нужен JavaScript, какие плюсы и минусы, где применяется?

Use strict, что это? Зачем в JavaScript нужен строгий режим?
JavaScript

Use strict, что это? Зачем в JavaScript нужен строгий режим?