Уровень данных (data) Vue приложений

Понятие уровня данных Vue компонентов

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

Например, если этот компонент выводит какую-то кнопочку, то для уровня данных там может находиться текст кнопки. Если этот компонент у нас выводит какой-то блок текста, там может быть какой-то блок текста. Если этот компонент выводит какой-то счётчик с какими-то цифрами, то на уровне данных могут находиться какие-то цифры. 

Уровень данных компонента, по сути, представляет собой состояние этого компонента. В каком состоянии этот компонент у нас с вами находится. 

Если мы с вами говорим о технической части, как можно добавить уровень данных для нашего компонента, то для этого у нас существует специальная функция, которая должна обязательно возвращать объект с данными для данного компонента.

Можем записать либо вот таким вот образом в формате ES6 

export default {
 name: "Test_1.vue",
 data() {
   return {
   counter: 1
  }
 },
}

Либо можем воспользоваться вот такой формой записи

data: function () {
  return {
  counter: 1
 }
}

Это тоже является допустимым, но, как как вы понимаете, первая форма записи более сокращенная и, как правило, если вы будете просматривать какие-то Vue компоненты, то вы будете видеть именно такую форму записи. 

Уровень данных в этой функции представляет собой объект, который содержит ключ-значения. 

У нас будет некий ключ, пусть будет counter счётчик и у него будет какое-то значение, которое он будет содержать. 

return {

 counter: 1

}

Можно указывать ключ в одинарных кавычках, а можно эти кавычки не указывать. Оба варианта допустимы.

Связь уровня данных с Vue шаблоном

Для того, чтобы теперь связать уровень данных с нашим шаблоном, чтобы в шаблоне мы могли вывести уровень данных существует специальный синтаксис, специальная форма записи, которая представляет комбинацию из таких вот фигурных кавычек 

{{ key }}

Две открывающие фигурные скобки и две закрывающие фигурные скобки и внутри них указывается тот ключ из уровня данных, который мы хотим вывести. 

Такая форма записи, которую мы сейчас с вами использовали, называется интерполяция. Интерполяция - это вставка данных в какой-то другой контекст. 

У нас есть контекст уровня данных компонента, то есть скриптов и мы из этого контекста передаём их в другой контекст. Важно запомнить эту форму записи, что с её помощью мы можем в шаблоне выводить какие-то ключи из уровня данных.

Про реактивность данных Vue

Преимущество Vue заключается в том, что данные, которые мы будем выводить и хранить на уровне данных являются реактивными. При изменении каких-то данных на уровне данных в скрипте, они также меняются и в нашем шаблоне. Изменение состояния меняет представление и наоборот.

Данные реактивно реагируют на изменение уровня данных. Уровень данных также может содержать в себе объект. 

Например,

data: function () {

  return {

  counter: {

      count: 5,

      text: "sdfsd"

  }

 }

}

Мы можем обращаться к уровню данных как к объекту.

<p>{{ counter.count }} - {{ counter.text }}</p>

Здесь выведем точно так же, как мы это делаем в обычном Javascript. 

Вот, пожалуй, всё, что я хотел рассказать по поводу работы с уровнем данных во Vue компонентах. Это основы, которые нужно понимать.