Это позволяет нам легко извлекать логику и не беспокоиться о значении this
в нашем коде.
Он также лучше работает с TypeScript, потому что значение this
больше не нужно вводить.
В этой статье мы рассмотрим, как создавать приложения Vue 3 с помощью Composition API.
Крючки жизненного цикла
Хуки жизненного цикла также доступны в API композиции Vue 3.
Мы помещаем их все в метод setup
.
Например, мы можем написать:
<template> <div></div> </template> <script> import { onMounted, onUnmounted, onUpdated } from "vue"; export default { name: "App", setup() { onMounted(() => { console.log("mounted!"); }); onUpdated(() => { console.log("updated!"); }); onUnmounted(() => { console.log("unmounted!"); }); }, }; </script>
Мы передаем обратный вызов функциям жизненного цикла.
beforeCreate
и created
заменяются методом setup
.
И ниже приведены эквиваленты API-интерфейса композиции для хуков API-интерфейса параметров:
beforeMount
->onBeforeMount
mounted
->onMounted
beforeUpdate
->onBeforeUpdate
updated
->onUpdated
beforeDestroy
->onBeforeUnmount
destroyed
->onUnmounted
activated
->onActivated
deactivated
->onDeactivated
errorCaptured
->onErrorCaptured
Левая сторона содержит хуки API опций, а правая - эквиваленты API композиции.
Composition API также имеет 2 отладочных крючка:
onRenderTracked
onRenderTriggered
Мы можем написать:
export default { onRenderTriggered(e) { debugger } }
чтобы проверить, какая зависимость вызывает повторную отрисовку компонента.
Внедрение зависимости
Мы можем вводить зависимости с помощью функций provide
и inject
.
provide
и inject
включает внедрение зависимостей, аналогичное проекту и внедрению в Vue 2.x.
Например, мы можем написать:
<template> <div></div> </template> <script> import { provide, inject } from "vue"; const ThemeSymbol = Symbol(); const Ancestor = { setup() { provide(ThemeSymbol, "dark"); }, }; export default { name: "App", setup() { const theme = inject(ThemeSymbol, "light"); return { theme, }; }, }; </script>
У нас есть компонент Ancestor
, который вызывает provide
, чтобы мы могли передать зависимость, обозначенную ThemeSymbol
, компоненту App
.
В методе App
setup
мы вызываем inject
с ThemeSymbol
, чтобы получить данные, переданные из provide
.
'light'
- значение по умолчанию, если ничего с идентификатором ThemeSymbol
не указано.
Ссылки на шаблоны
Composition API позволяет нам получить доступ к ссылкам на шаблоны.
Мы используем функцию ref
для создания ссылки.
Затем мы можем назначить его в шаблоне желаемому элементу или компоненту.
Например, мы можем написать:
<template> <div ref="root"></div> </template> <script> import { ref, onMounted } from "vue"; export default { name: "App", setup() { const root = ref(null); onMounted(() => { console.log(root.value); }); return { root, }; }, }; </script>
Мы создаем root
ref с функцией ref
.
Затем мы устанавливаем имя ref
на атрибут ref
.
Тогда root.value
будет div.
Если мы используем функцию рендеринга, мы пишем:
<template> <div></div> </template> <script> import { ref, onMounted, h } from "vue"; export default { name: "App", setup() { const root = ref(null); onMounted(() => { console.log(root.value); }); return () => h("div", { ref: root, }); }, }; </script>
чтобы назначить ссылку на div, который мы создаем в функции h
.
Заключение
Мы можем добавить хуки жизненного цикла и ссылки в наше приложение Vue 3 с помощью API композиции.
Больше контента на plainenglish.io