Основы разработки фронтенда - Основы компонентов - Два способа создания переменных

Переменные для компонентов можем создавать в тэге script,

Для создания переменных мы можем использовать метод data:

export default {
  data() {
    return {
      name: "test",
    }
  }
}

Тогда в template мы можем вывести значение:

Hello, {{ name }}!

Vue3

Во Vue3 для создания переменных можно воспользоваться модулем ref. Пример:

import {ref, onMounted} from "vue";
import axios from 'axios';

export default {
  name: 'About',
  setup() {
    const users = ref([]);
    onMounted(async () => {
      const response = await axios.get('https://randomuser.me/api/?results=6');
      users.value = response.data.results;
      console.log(users.value);
    });
    return {
      users
    }
  }
}

Обратите внимание на то, что после объявления переменной users, мы можем к ней обращаться с помощью users.value, например для того чтобы определить или переопределить её значение.

Такой способ создания и работы с переменными (с помощью модуля ref и в диррективе setup используется в Composition API)