До свидания, API опций, привет, настройка скрипта! Не такой уж и новый способ программирования в Vue 3

В своей версии 3 Vue представил новую систему организации кода компонентов под названием «Composition API». Этот API является альтернативой «API параметров», который был исходной системой для организации кода в Vue.

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

API опций

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

Среди этих параметров: данные, методы, вычисляемые, часы, свойства, компоненты и т. д. Каждый из этих параметров служит определенной цели и определяет часть функциональности компонента. Есть много других опций (смонтировано, создано, перед уничтожением и т. д.), отсюда и название.

export default {
  data() {
    return {
      message: '¡Hola, Vue!'
    }
  },
  methods: {
    sayHello() {
      console.log(this.message);
    }
  }
}

API композиции

Composition API — это новый способ определения и организации компонентов в Vue 3. Вместо того, чтобы использовать разные параметры для разных функций, с помощью Composition API вы определяете свой компонент, используя единую функцию: настройку.

Внутри функции настройки вы можете определить все аспекты вашего компонента: реактивные данные, функции, наблюдатели и т. д. Это позволяет вам группировать связанную логику вместе, а не разделять ее по функциям.

import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue!');

    const sayHello = () => {
      console.log(message.value);
    }

    return {
      message,
      sayHello
    }
  }
}

API композиции

Composition API — это новый способ определения и организации компонентов в Vue 3. Вместо того, чтобы использовать разные параметры для разных функций, с помощью Composition API вы определяете свой компонент, используя единую функцию: настройку.

Внутри функции настройки вы можете определить все аспекты вашего компонента: реактивные данные, функции, наблюдатели и т. д. Это позволяет вам группировать связанную логику вместе, а не разделять ее по функциям.

import { ref } from 'vue';
export default {
  setup() {
    const message = ref('Hello, Vue!');
    const sayHello = () => {
      console.log(message.value);
    }
    return {
      message,
      sayHello
    }
  }
}

Отличия

Основные различия между этими двумя API:

1. Организация кода: с помощью API параметров связанная логика разделена между различными параметрами, тогда как с помощью API композиции вы можете сгруппировать связанную логику вместе.
2. Повторное использование кода: Composition API упрощает повторное использование кода и логики между компонентами.
3. Тип данных: в Options API this используется для доступа к реактивным данным, а в Composition API такие функции, как ref и reactive, используется для создания и доступа к реактивным данным.

Vue 3 по-прежнему полностью поддерживает API параметров, поэтому вы можете продолжать использовать его, если хотите.

Настройка скрипта

‹script setup› появился в Vue 3.2. Он обеспечивает более краткий способ использования Composition API в компонентах одного файла (SFC).

Вместо экспорта объекта конфигурации компонента с функцией настройки вы можете написать код компонента непосредственно в блоке ‹script setup›. Любая переменная или функция, которые вы объявляете в ‹настройке скрипта›, автоматически отображаются в шаблоне вашего компонента.

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

const message = ref('Hello, Vue!');

const sayHello = () => {
  console.log(message.value);
}
</script>

Это точный эквивалент компонента, который мы определили ранее со стандартной функцией настройки, но он более лаконичен.

Преимущества настройки скрипта

1. Более лаконичный и понятный код. Вы можете написать свой код прямо в блоке, вместо того чтобы экспортировать объект.
2. Больше повторного использования логики: вы можете сгруппировать всю связанную логику с функцией в одном блоке.
3. Улучшенная поддержка Typescript. Если вы используете Typescript, настройка скрипта и Composition API имеют лучшую поддержку, чем Options API.
4. Более детальный контроль над реактивностью: вы можете точно решить, какие данные должны быть реактивными и как они должны реагировать на изменения.
5. Организация кода. Вы можете организовать код по логике функций, а не по параметрам компонента.

Заключение

Выбор между использованием ‹настройки сценария› и Composition API или Options API во многом зависит от вашего проекта и ваших личных предпочтений. Тем не менее, ‹настройка сценария› — это новое предпочтение в проектах Vue 3.