Это позволяет нам легко извлекать логику и не беспокоиться о значении 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