Hej! Nazywam się Hossein Mousavi i jestem inżynierem Front End w Alibaba Travels . W tej średniej historii krok po kroku zrefaktoryzujemy komponent Vue i udoskonalimy go. Więc zaczynamy?!

Co to jest konfiguracja skryptu?

<script setup>to cukier składniowy czasu kompilacji do używania Composition API w komponentach Single-File Components ( SFC ). Jest to zalecana składnia do używania zarówno SFC, jak i Composition API. Wszystko, co musisz zrobić, to dodać setupjako atrybut script. Aby zapobiec wprowadzaniu w błąd, jest dostępny tylko dla komponentów SFC i nie można go używać z atrybutem srcdla zewnętrznych plików .js lub .ts . Zapewnia szczuplejszą bazę kodu i lepszą wydajność środowiska uruchomieniowego. Za chwilę omówimy jego zalety, ale najpierw przyjrzyjmy się jego implementacji. Chwytamy prosty komponent z interfejsem API opcji , a następnie przekształcamy go w komponent skryptu instalacyjnego z interfejsami API kompozycji. W takim razie przejdźmy do rzeczy!

Realizacja

Najpierw przyjrzyjmy się standardowemu komponentowi Vue z Option API. Tego rodzaju komponenty można łatwo znaleźć w aplikacjach Vue 2.

<template>
  <input v-model="name" />
  <button @click="incrementAge()"> Increment Age </button>
  <h1> {{ computedVariable }} </h1>
</template>

<script>
export default {
  data() {
    return {
      name: "Hossein",
      age: 26,
    };
  },

  computed: {
    computedVariable() {
      return `My name is ${this.name} and I'm ${this.age} years old`;
    },
  },

  methods: {
    incrementAge() {
      this.age += 1;
    },
  },
};
</script>

Jest to prosty komponent z naciskiem na koncepcje dwukierunkowego wiązania danych i chcemy refaktoryzować ten komponent w wielu krokach.

Refaktoryzacja Krok 1: Korzystanie z interfejsu API kompozycji

Aby skorzystać z API kompozycji, musimy użyć specjalnego haka o nazwie: funkcja setup . Ale musimy zająć się kilkoma rzeczami, aby nasz komponent działał poprawnie.

<template>
  <input v-model="user.name" />
  <button @click="incrementAge()"> Increment Age </button>
  <h1>{{ computedVariable }}</h1>
</template>

<script>
import { computed, reactive } from "vue";
export default {
  setup() {
    const user = reactive({ name: "Hossein", age: 26 });

    function incrementAge() {
      user.age++;
    }

    const computedVariable = computed(
      () => `My name is ${user.name} and I'm ${user.age} years old`
    );

    return {
      computedVariable,
      incrementAge,
      user
    };
  },
};
</script>

• Zaimportowaliśmy computediz reactivevue. Piszę kolejną historię Medium, aby dogłębnie omówić reaktywność Vue 3.
• Jak widać, mamy setupfunkcję, w której zostały zapisane wszystkie nasze zmienne i funkcje. Jeśli chcesz używać zmiennych lub funkcji w swoim szablonie, musisz je ujawnić, zwracając je na końcu funkcji.
• Jak computedVariablewidać, Vue jest obliczany jako funkcja strzałki.
• Powodem, dla którego wszystkie zmienne reactivei computedsą używane, consta nie, letjest to, że mają w sobie moduł pobierający i ustawiający oraz używają proxy JavaScript do zmiany danych w swoim odwołaniu. Dlatego nie musimy ich ponownie tworzyć.

Refaktoryzacja Krok 2: Korzystanie z defineComponent

Osobiście uważam, że zawsze powinieneś używać TypeScript we wszystkich swoich projektach, zwłaszcza jeśli nie jesteś jedynym opiekunem/programistą projektu. Używając TypeScript, twój kod stałby się przewidywalny zarówno dla maszyn, jak i ludzi, a ja mocno ćwiczę pisanie przewidywalnego kodu w moim projekcie. defineComponent to pomocnik typu do definiowania komponentu Vue z wnioskowaniem o typie. Sprawdźmy to:

<template>
  <input v-model="user.name" />
  <button @click="incrementAge()"> Increment Age </button>
  <h1>{{ computedVariable }}</h1>
</template>

<script lang="ts">
import { 
   defineComponent,
   computed,
   reactive,
   type Computed,
   type Reactive } from "vue";

interface User {
  name: string;
  age: number;
}

interface ComponentOutput {
  computedVariable: Computed<string>;
  incrementAge: () => void;
  user: Reactive<User>;
}

export default defineComponent({
  setup(): ComponentOutput {
    const user = reactive<User>({ name: "Hossein", age: 26 });

    function incrementAge(): void {
      user.age++;
    }

    const computedVariable = computed<string>(
      () => `My name is ${user.name} and I'm ${user.age} years old`
    );

    return {
      computedVariable,
      incrementAge,
      user
    };
  },
});
</script>

• Najpierw musimy jawnie zadeklarować, że językiem, którego chcemy używać, jest TypeScript, dodając atrybut wywołany langi ustawiony tsjako jego wartość.
• Zatem, jak widzisz, defineComponentjest to funkcja, która jako argument przyjmuje funkcję konfiguracji. Jeśli nasz komponent potrzebuje rekwizytów, emisji lub kilku innych opcji, możemy je również przekazać jako argument. Później przyjrzymy się bardziej skomplikowanemu komponentowi.
• Stworzyliśmy dwa interfejsy dla użytkownika i wyniku działania komponentu. Chociaż pisanie typu zwracanego dla funkcji konfiguracji nie jest tak powszechne, napisałem to w celach edukacyjnych .
• Zaimportowaliśmy dwa typy z vue. Oba zaczynają się wielką literą: Computedi Reactive. Te dwa typy mają rodzajowy, jak widać. Musimy jawnie zadeklarować ich typ ogólny.

Refaktoryzacja Krok 3: Korzystanie z konfiguracji skryptu

Teraz nadszedł czas na użycie setupskryptu. Najpierw spójrzmy na poniższy kod, a następnie go przeanalizujemy.

<template>
  <input v-model="user.name" />
  <button @click="incrementAge()">Increment Age</button>
  <h1>{{ computedVariable }}</h1>
</template>

<script setup lang="ts">
import { computed, reactive, Computed, Reactive } from "vue";

interface User {
  name: string;
  age: number;
}

const user = reactive<User>({ name: "Hossein", age: 26 });

function incrementAge(): void {
  user.age++;
}

const computedVariable = computed<string>(
  () => `My name is ${user.name} and I'm ${user.age} years old`
);
</script>

• Po zapisaniu go nie ma potrzeby używania żadnej setup()metody ani defineComponentwewnątrz kodu. Vue obsługuje je za nas.
• Pamiętaj, że nie ma potrzeby zwracania wartości ani funkcji, których chcesz użyć w swoim szablonie. Każda funkcja i zmienna, która jest używana w szablonie, automatycznie powróci z sekcji skryptu.

Regularnie intensywnie korzystam z konfiguracji skryptu . Uważam, że jest to niezwykle przydatne i łatwe do odczytania, a także prowadzi do znacznie szczuplejszego kodu.

Podziel się z przyjaciółmi! Klaśnij maksymalnie 50 razy.

Nie wahaj się podzielić ze mną swoimi przemyśleniami i pomysłami. Możesz skontaktować się ze mną na Twitterze lub znaleźć inny sposób, odwiedzając moje portfolio .

Czytaj więcej ode mnie: