Dlaczego używamy interfejsu Composition API w VueJS

Potrzebujemy czasu na przegląd kodu, refaktoryzację i czytelny/czysty kod, gdy skala Twojej aplikacji wzrośnie. Używamy Mixins, aby zapewnić funkcjonalność wielokrotnego użytku i zachować przejrzystość komponentów. Możemy rozwiązać te problemy za pomocą interfejsu Composition API. W tym artykule wspomnę „Dlaczego używamy Composition API”.

Czemu?

W mojej architekturze Front Endu komponenty działają bez logiki biznesowej. Logika biznesowa powinna znajdować się poza komponentami. Komponenty powinny działać jak warstwa widoku. Warstwa czeka tylko na dane i tylko je renderuje. W tym momencie możemy udostępnić go za pomocą interfejsu Composition API.

Uwaga: Właściwie wolę czystą klasę JS dla logiki biznesowej, ale nie wspominam o tym w tym artykule. To inny temat

• Możemy zachować tę samą funkcjonalność w powiązanych kompozycjach
• Możemy wielokrotnie używać funkcji w dowolnym komponencie. Funkcje stają się wielokrotnego użytku z kompozycjami
• Kompozycja zwiększa czytelność kodu

• Podczas używania w komponentach możemy napotkać konflikt nazw funkcji mixin
• Jeśli liczba mixin wzrasta w jednym składniku, nie może być zrozumiałe, która funkcja jest związana z którym mixin
• Kiedy używamy mixin w mixin. to może być jak miksowanie w piekle

Mamy jedną funkcję konfiguracji w komponencie. Funkcja konfiguracji działa jak hak, a funkcja ma więcej haków.

Funkcja setup jest wyzwalana przed renderowaniem komponentów, dzięki czemu możemy uzyskać dane właściwości wraz z parametrami, ponieważ w tej chwili nie mamy danych właściwości.

Uwaga: nie możemy użyć tego słowa kluczowego w funkcji setup, ponieważ składowe api powinno być niezależne od komponentów

• Możemy użyć „ref” do konwersji danych reaktywnych na wartość pierwotną (boolean, string, number)

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>