С выходом 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.
attrs
- атрибуты компонента.slots
- слоты компонента.emit
- позволяет нам испускать событие из этого компонента.
Мы можем получить доступ к этому объекту контекста следующим образом:
Или, если нам не нужен объект контекста целиком, мы можем его деструктурировать.
Заключение
Новые передовые практики, методы и шаблоны проектирования обязательно появятся в будущем, когда Vue 3 официально выйдет. Но пока это лишь некоторые из вещей, которые я хотел бы знать, когда начал экспериментировать с Composition API.
Надеюсь, вы чему-то научились и чувствуете себя более комфортно с новыми изменениями.
Удачного кодирования!