Содержание

1. Что делает Composition API? 

Проблема компонентов Options API, о которой мы с вами говорили в предыдущих видео, это то, что мы с вами ограничены опциями этого компонента. Мы обязаны писать код согласно расположению этих опций. 

Код у нас может выглядеть вот таким вот образом:

здесь какая-то одна часть, здесь какая-то другая часть и так далее. 

Что делает Composition API? 

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

Нужно понимать, что такое расположение не является обязательным. Вы можете, в принципе, компоновать код, как вам будет угодно. Самое главное, что у вас появляется гибкость и выбор: либо вы формируете код подобно Options API подходу, либо вы формируете код, как вам это будет нужно. 

У вас появляется гибкость при подходе Composition API. 

Давайте теперь подробнее рассмотрим, что же это за гибкость и как её можно использовать на практике на конкретном примере. 

Ниже у нас пример двух компонентов:

1) Компонент на Composition API

<template>
<div>
{{ name }}
</div>
</template>

<script setup>
import { ref } from 'vue'

let name = ref(123);
function changeUserName() {

}

let last_name = ref(123);
function changeLastName() {

}
</script>

2) Компонент на Options API

<template>
<div>
{{ name }}
</div>
</template>

<script>

export default {
name: "TestComponent.vue",
data() {
return {
name: '123',
last_name: '2342'
}
},
created() {},
methods: {
changeLastName() {

}
}
}
</script>

Предположим, у нас есть, какие-то две переменные: переменная имя и переменная фамилия, и нам нужно каким-то образом видоизменять их, в зависимости от каких-то условий. 

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

В том случае, если мы разрабатываем на Composition API, у нас есть возможность расположить эти переменные так, как нам это будет нужно. 

Например, у нас есть обработчики для этих переменных: changeUserName(), которая будет менять при каких-то условиях нашу переменную name, и changeLastName(), которая при каких-то условиях будет менять нам latName.

В случае с Options API, вот эти функции они должны находиться обязательно в опции methods. Мы не можем их разместить в каком-то другом месте. У нас появляется ограничение, что данные находятся где-то в одном месте, а функции, которые эти данные обрабатывают, находятся в каком-то другом месте.

В случае же с Composition API, мы вольны располагать всё, как нам это нужно, то есть у нас появляется логический блок, который у нас отвечает за изменение name, и у нас появляется логический блок, который отвечает за изменения LastName. 

Для небольших компонентов такое преимущество может быть не столь очевидным, но в том случае, если вы работаете с огромным Vue-компонентом, вы на себе почувствуете всю тяжесть работы с таким подходом Options API. У вас будет огромная "портянка" методов и огромная "портянка" data. 

Нужно будет каждый раз прокручивать долго вверх, прокручивать долго вниз, чтобы найти какой-то кусок кода. 

В Composition API, мы можем все наши логические блоки объединить в каких-то конкретных местах и использовать их в нужный момент времени и не скролить долго наш блок. 

Для Options API даже есть специальные библиотеки, плагины, которые позволяют быстро перепрыгивать с одного места в другое. Это действительно проблема, и даже приходится создавать отдельные плагины для решения этой задачи. 

Таким образом, с помощью Composition API, мы решаем эту проблему гибкости расположения наших элементов и разделяем их на логические блоки. 

Нужно понимать, что эта возможность у нас есть, и мы можем её либо придерживаться, либо не придерживаться, это наши возможности, это наш выбор. Вот такое полезное преимущество Composition API, которое позволяет нам значительно упростить разработку больших Vue-компонентов.