Vue3 Options API

Следующие API широко используются в Options API Vue для управления состоянием, жизненным циклом, слотами, внедрением зависимостей и другими возможностями.

1. Параметры состояния

Нет. API и описание Пример
1 data
Опция data компонента, используемая для определения состояния компонента.		 data() { return { count: 0 }; }
2 props
Опция props компонента, определяющая данные, передаваемые от родительского компонента дочернему компоненту.		 props: { msg: String }
3 computed
Вычисляемые свойства, используемые для определения производных значений на основе состояния компонента (data, props).		 computed: { doubledCount() { return this.count * 2; } }
4 methods
Опция methods компонента, используемая для определения бизнес-логики компонента.		 methods: { increment() { this.count += 1; } }
5 watch
Отслеживание изменений реактивных данных компонента и выполнение обратных вызовов.		 watch: { count(newVal) { console.log(newVal); } }
6 emits
Определение пользовательских событий, которые компонент может испускать.		 emits: ['update']
7 expose
Свойства или методы, явно предоставленные для доступа со стороны родительского компонента.		 expose() { return { method } }

2. Опции рендеринга

Нет. API и описание Пример
1 template
Определение HTML-шаблона компонента.		 <template><button @click="increment">{{ count }}</button></template>
2 render
Использование функции рендеринга вместо шаблона.		 render(h) { return h('button', { on: { click: this.increment } }, this.count) }
3 compilerOptions
Настраивает параметры компилятора шаблонов.		 compilerOptions: { delimiters: ['{{', '}}'] }
4 slots
Определяет слоты компонента.		 <slot></slot>

3. Опции жизненного цикла

Нет. API и описание Пример
1 beforeCreate
Вызывается перед созданием экземпляра компонента.		 beforeCreate() { console.log('Before Create') }
2 created
Вызывается после создания экземпляра компонента, когда данные уже настроены.		 created() { console.log('Created') }
3 beforeMount
Вызывается перед монтированием в DOM, когда шаблон уже скомпилирован.		 beforeMount() { console.log('Before Mount') }
4 mounted
Вызывается после монтирования компонента в DOM.		 mounted() { console.log('Mounted') }
5 beforeUpdate
Вызывается после изменения данных и перед повторным рендерингом компонента.		 beforeUpdate() { console.log('Before Update') }
6 updated
Вызывается после завершения обновления компонента.		 updated() { console.log('Updated') }
7 beforeUnmount
Вызывается перед размонтированием компонента.		 beforeUnmount() { console.log('Before Unmount') }
8 unmounted
Вызывается после размонтирования компонента.		 unmounted() { console.log('Unmounted') }
9 errorCaptured
Вызывается, когда перехватываются ошибки от дочерних компонентов.		 errorCaptured(err, vm, info) { console.error(err) }
10 renderTracked
Вызывается, когда реактивные данные изменяются и запускают повторный рендеринг.		 renderTracked(event) { console.log('Render Tracked') }
11 renderTriggered
Вызывается, когда реактивные данные запускают повторный рендеринг.		 renderTriggered(event) { console.log('Render Triggered') }
12 activated
Вызывается, когда компонент активируется (только дляkeep-aliveкомпонентов).		 activated() { console.log('Activated') }
13 deactivated
Вызывается, когда компонент деактивируется (только дляkeep-aliveкомпонентов).		 deactivated() { console.log('Deactivated') }
14 serverPrefetch
Хук для получения данных во время серверного рендеринга.		 serverPrefetch() { return fetchData() }

4. Опции композиции

Нет. API и описание Пример
1 provide
Предоставление зависимостей компонентам-потомкам.		 provide('key', 'value')
2 inject
Внедрение зависимостей из компонентов-предков.		 inject('key')
3 mixins
Подключение внешних миксинов для повторного использования логики.		 mixins: [myMixin]
4 extends
Компонент расширяет опции другого компонента.		 extends: MyComponent

5. Прочее

Нет. API и описание Пример
1 name
Имя компонента, обычно используемое для отладки.		 name: 'MyComponent'
2 inheritAttrs
Управляет тем, будут ли атрибуты (attrs) из родительского компонента автоматически наследоваться корневым элементом.		 inheritAttrs: false
3 components
Регистрирует локальные компоненты, чтобы их можно было использовать в текущем компоненте.		 components: { LocalComponent }
4 directives
Регистрирует локальные директивы, чтобы их можно было использовать в текущем компоненте.		 directives: { focus: FocusDirective }

6. Экземпляр компонента

Нет. API и описание Пример
1 $data
Получить объект data компонента.		 this.$data.count
2 $props
Получить объект props компонента.		 this.$props.msg
3 $el
Получить DOM-элемент, в который смонтирован компонент.		 this.$el
4 $options
Получить опции конфигурации компонента.		 this.$options.name
5 $parent
Получить экземпляр родительского компонента.		 this.$parent
6 $root
Получить экземпляр корневого компонента.		 this.$root
7 $slots
Получить содержимое слота компонента.		 this.$slots.default
8 $refs
Получить объект ссылок компонента.		 this.$refs.input
9 $attrs
Получить все атрибуты, не привязанные к props компонента.		 this.$attrs
10 $watch()
Отслеживать реактивные данные или вычисляемые свойства экземпляра компонента.		 this.$watch('count', (newCount) => { console.log(newCount) })
11 $emit()
Инициировать пользовательское событие.		 this.$emit('update', newVal)
12 $forceUpdate()
Заставить Vue повторно отрендерить компонент.		 this.$forceUpdate()
13 $nextTick()
Выполнить функцию обратного вызова после завершения следующего цикла обновления DOM.		 this.$nextTick(() => { console.log('DOM updated') })
Другие расширения