Глобальний API: Загальне
version
Показує поточну версію Vue.
Тип:
string
Приклад
jsimport { version } from 'vue' console.log(version)
nextTick()
Утиліта для очікування наступного оновлення DOM.
Тип
tsfunction nextTick(callback?: () => void): Promise<void>
Подробиці
Коли ви змінюєте реактивний стан у Vue, отримані оновлення DOM не застосовуються синхронно. Натомість Vue буферизує їх до «наступного тіка», щоб гарантувати, що кожен компонент оновлюється лише один раз, незалежно від того, скільки змін стану ви зробили.
nextTick()
можна використовувати одразу після зміни стану, щоб дочекатися завершення оновлення DOM. Ви можете або передати функцію зворотного виклику як аргумент, або дочекатися поверненого Promise.Приклад
vue<script setup> import { ref, nextTick } from 'vue' const count = ref(0) async function increment() { count.value++ // DOM ще не оновлено console.log(document.getElementById('counter').textContent) // 0 await nextTick() // DOM оновлено console.log(document.getElementById('counter').textContent) // 1 } </script> <template> <button id="counter" @click="increment">{{ count }}</button> </template>
Також до вашої уваги:
this.$nextTick()
defineComponent()
Помічник типу для визначення компонента Vue за допомогою визначення типу.
Тип
ts// синтаксис опційний function defineComponent( component: ComponentOptions ): ComponentConstructor // синтаксис функції (requires 3.3+) function defineComponent( setup: ComponentOptions['setup'], extraOptions?: ComponentOptions ): () => any
Тип спрощено для зручності читання.
Подробиці
Перший аргумент очікує об’єкт параметрів компонента. Поверненим значенням буде той самий об’єкт параметрів, оскільки функція, по суті, є безопераційною під час виконання і потрібна лише для визначення типу.
Зверніть увагу, що тип поверненого значення є дещо особливим: це буде тип конструктора, тип екземпляра якого є виведеним типом екземпляра компонента на основі параметрів. Це використовується для визначення типу, коли повернутий тип використовується як тег у TSX.
Ви можете витягнути тип екземпляра компонента (еквівалентний типу
this
у його параметрах) із типу поверненого значенняdefineComponent()
наступним чином:tsconst Foo = defineComponent(/* ... */) type FooInstance = InstanceType<typeof Foo>
Сигнатура функції
defineComponent()
також має альтернативну сигнатуру, яка призначена для використання з композиційним API та функціями рендерингу або JSX.
Замість передачі об'єкта параметрів очікується функція. Ця функція працює так само, як функція композиційного API setup()
: вона отримує атрибути та контекст налаштування. Значення, яке повертається, має бути функцією рендерингу - підтримуються як h()
, так і JSX:
js
import { ref, h } from 'vue'
const Comp = defineComponent(
(props) => {
// використовуйте тут композиційний API, як у <script setup>
const count = ref(0)
return () => {
// функція рендерингу або JSX
return h('div', count.value)
}
},
// додаткові опції, наприклад, оголошення реквізитів та випромінювань
{
props: {
/* ... */
}
}
)
Основним випадком використання цієї сигнатури є TypeScript (зокрема, з TSX), оскільки вона підтримує загальні типи:
tsx
const Comp = defineComponent(
<T extends string | number>(props: { msg: T; list: T[] }) => {
// використовуйте тут композиційний API, як у <script setup>
const count = ref(0)
return () => {
// функція рендерингу, чи JSX
return <div>{count.value}</div>
}
},
// наразі все ще потрібна декларація реквізитів під час виконання вручну.
{
props: ['msg', 'list']
}
)
У майбутньому ми плануємо надати плагін Babel, який автоматично виводить і вводить реквізити під час виконання (як для defineProps
у SFCs), щоб можна було пропустити їх оголошення.
Примітка щодо "Струшування дерева"
Оскільки defineComponent()
є викликом функції, це може виглядати так, ніби це спричинить побічні ефекти для деяких інструментів збірки, напр. webpack. Це запобіжить струшування компонента, навіть якщо компонент ніколи не використовується.
Щоб повідомити webpack, що цей виклик функції безпечний для обробки дерева, ви можете додати анотацію коментаря /*#__PURE__*/
перед викликом функції:
js
export default /*#__PURE__*/ defineComponent(/* ... */)
Зауважте, що це не обов'язково робити, якщо ви використовуєте Vite, оскільки Rollup (основний продакшн комплектувальник, який використовує Vite) достатньо розумний, щоб визначити, що defineComponent()
насправді не має побічних ефектів і не потребує ручних анотацій.
- Також до вашої уваги: Гід - Використання Vue з TypeScript
defineAsyncComponent()
Визначає асинхронний компонент, який відкладено завантажується лише під час рендерингу. Аргумент може бути або функцією завантажувача, або об'єктом параметрів для більш розширеного керування поведінкою завантаження.
Тип
tsfunction defineAsyncComponent( source: AsyncComponentLoader | AsyncComponentOptions ): Component type AsyncComponentLoader = () => Promise<Component> interface AsyncComponentOptions { loader: AsyncComponentLoader loadingComponent?: Component errorComponent?: Component delay?: number timeout?: number suspensible?: boolean onError?: ( error: Error, retry: () => void, fail: () => void, attempts: number ) => any }
Також до вашої уваги: Гід - Асинхронні компоненти
defineCustomElement()
Цей метод приймає той самий аргумент, що й defineComponent
, але натомість повертає рідний конструктор класу користувацького елемента.
Тип
tsfunction defineCustomElement( component: | (ComponentOptions & { styles?: string[] }) | ComponentOptions['setup'] ): { new (props?: object): HTMLElement }
Тип спрощено для зручності читання.
Подробиці
Окрім звичайних параметрів компонента,
defineCustomElement()
також підтримує спеціальну опціюstyles
, яка має бути масивом вбудованих рядків CSS, для надання CSS, який слід вставити в тіньовий корінь елемента.Значення, що повертається, є власним конструктором елемента, який можна зареєструвати за допомогою
customElements.define()
.Приклад
jsimport { defineCustomElement } from 'vue' const MyVueElement = defineCustomElement({ /* параметри компонента */ }) // Реєстрація користувацького елемента. customElements.define('my-vue-element', MyVueElement)
Також до вашої уваги:
Також зауважте, що
defineCustomElement()
вимагає спеціальної конфігурації при використанні з однофайловими компонентами.