С выходом Vue 3 Alpha многие разработчики пробуют новые изменения, самым большим из которых является Composition API.

С выходом Vue 3 Alpha многие разработчики пробуют новые изменения, самым большим из которых является Composition API.

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

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

1. Используйте его правильно, чтобы оставаться организованным

Основное преимущество Composition API - это возможность более эффективно организовывать и повторно использовать код.

Раньше в API параметров код для одной функции был разделен на разные параметры компонентов. Теперь все в одном месте.

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

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

2. Когда использовать ref или reactive

Поскольку Composition API напрямую предоставляет API реактивности Vue, у нас есть два разных способа создания реактивных данных: ref и reactive.

Хотя reactive более универсален, эти объекты теряют реактивность всякий раз, когда они деструктурируются или распространяются. Чтобы бороться с этим, вы можете использовать метод toRefs, который преобразует каждое свойство объекта в его собственное реактивное ref.

Если вы хотите более подробно рассмотреть, когда теряется реактивность, Composition API RFC - отличное место для начала.

3. Вы можете получить доступ к реквизитам в setup ()

В Vue 2 мы могли получить доступ к реквизитам в любом месте компонента с помощью this.propName.

Огромная разница между API параметров и API композиции заключается в том, что мы используем метод setup(). Программа установки не имеет такого же доступа к this, как наши методы API параметров.

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

К счастью, наш метод установки принимает свойства компонента в качестве первого аргумента.

export default {
	setup (props) {
		console.log(props)
	}
}

Используя этот синтаксис, теперь мы можем получить доступ к свойствам нашего компонента внутри нашего метода настройки. Это означает, что наши данные, методы, вычисленные значения и многое другое могут использовать ссылки на свойства.

Просто помните, что реквизиты должны быть доступны только для чтения и никогда не изменяться.

4. setup () также имеет аргумент контекста

Помимо принятия props в качестве аргумента, setup() имеет второй необязательный аргумент: объект контекста, который предоставляет три свойства экземпляра Vue.

  1. attrs - атрибуты компонента.
  2. slots - слоты компонента.
  3. emit - позволяет нам испускать событие из этого компонента.

Мы можем получить доступ к этому объекту контекста следующим образом:

Или, если нам не нужен объект контекста целиком, мы можем его деструктурировать.

Заключение

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

Надеюсь, вы чему-то научились и чувствуете себя более комфортно с новыми изменениями.

Удачного кодирования!