Почему мы используем Composition API в VueJS

Нам нужно время для проверки кода, рефакторинга и читаемого/понятного кода, когда масштаб вашего приложения увеличивается. Мы используем Mixins для повторного использования функциональности и сохраняем четкие компоненты. Мы можем решить эти проблемы с помощью Composition API. В этой статье я упомяну «Почему мы используем Composition API».

Почему?

В моей архитектуре Front End компоненты работают без бизнес-логики. Бизнес-логика должна быть вне компонентов. Компоненты должны работать как слой представления. Слой ожидает только данных и только отображает данные. На данный момент мы можем предоставить ему Composition API.

Примечание. На самом деле я предпочитаю чистый класс JS для бизнес-логики, но я не упоминаю его в этой статье. это другая тема

• Мы можем сохранить ту же функциональность в связанных композициях
• Мы можем использовать функции в любом компоненте снова и снова. Функции становятся многоразовыми с композициями
• Композиция повышает читаемость кода

• Мы можем столкнуться с конфликтом имен функций примесей при использовании в компонентах.
• Если количество миксинов увеличивается в одном компоненте, невозможно понять, какая функция связана с каким миксином.
• Когда мы используем миксин в миксине. Это может быть похоже на смешанный ад

У нас есть одна функция настройки в Component. Функция настройки работает как хук, и функция имеет больше хуков.

Функция настройки запускается перед рендерингом компонента, поэтому мы можем получить данные пропсов с параметрами, потому что в данный момент у нас нет данных пропсов.

Примечание. Мы не можем использовать это ключевое слово в функции настройки, потому что состав API должен быть независимым от компонентов .

• Мы можем использовать «ref» для преобразования реактивных данных в примитивное значение (логическое, строковое, числовое).

import { ref } from 'vue'

const counter = ref(0)

console.log(counter) // { value: 0 }
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1

<template>
  <h2>Notes:</h2>
  <textarea v-model="notes" />
</template>

<script lang="ts">
import { watchEffect, ref, defineComponent } from "vue";
import { save } from "./api";

export default defineComponent({
  setup() {
    const notes = ref("");

    watchEffect(() => save(notes.value));

    return {
      notes,
    };
  },
});
</script>