Основы разработки фронтенда - Composition API - Основы Composition API

Новый Composition API создает много удобных способов переиспользования кода в компонентах. Вспомним, что во Vue 2 логика разделялась по опциям: data, methods, props, created, и так далее:

export default {
  name: "FormSelect",
  data(){
    return {SelectedValue:''}
  },
  props: {
    options: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    changeOptions(){
      this.$emit('update:modelValue', this.SelectedValue)
    }
  }
}

С Composition API мы не ограничены этой структурой и не обязаны разделять код по опциям. Пример компоноента AuthLogin:

import {ref} from "vue";
import axios from "axios";

export default {
  name: "AuthLogin",
  setup(){ 
    const email = ref('');
    const password = ref(''); 
    const submit = async () => {
      const user_data = {
        'email' : email.value,
        'password' : password.value,
      };
      const response = await axios.post('login', user_data);
      await localStorage.setItem('token', response.data.token);
      //console.log(response.data.user.name, response.data.token);
      document.location.href = '/home';
    }
    return { 
      email,
      password, 
      submit
    }
  }
}