Hey! Ben Alibaba Travels'ta Ön Uç mühendisi olan Hossein Mousavi'yim ve bu orta ölçekli hikayede, bir Vue bileşenini adım adım yeniden düzenleyeceğiz ve geliştireceğiz. Öyleyse başlayalım mı?!

Komut Dosyası Kurulumu nedir?

<script setup>Tek Dosya Bileşenleri ( SFC'ler ) içinde Kompozisyon API'sini kullanmak için derleme zamanı sözdizimsel bir şekerdir . Hem SFC'leri hem de Kompozisyon API'sini kullanmak için önerilen söz dizimidir. Tek yapmanız gereken , . Yanılmayı önlemek için sadece SFC bileşenleri için mevcuttur ve harici .js veya .ts dosyaları için öznitelik ile kullanamazsınız . Daha yalın bir kod tabanı ve daha iyi çalışma zamanı performansı sağlar. Yararlarını birazdan tartışacağız ama önce uygulamasına geçelim. API seçeneğiyle basit bir bileşen alıyoruz ve ardından bunu kompozisyon API'leri ile bir kurulum komut dosyası bileşenine yeniden düzenliyoruzsetupscriptsrc. O zaman işimize bakalım!

uygulama

Öncelikle, Option API ile standart bir Vue bileşenine göz atalım. Bu tür bileşenleri Vue 2 uygulamalarında kolayca bulabilirsiniz.

<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>

Bu, iki yönlü veri bağlama kavramlarına odaklanan basit bir bileşendir ve bu bileşeni birden çok adımda yeniden düzenlemek istiyoruz.

1. Adım: Kompozisyon API'sini Kullanma

Kompozisyon API'sini kullanmak için, kurulum işlevi adlı özel bir kanca kullanmamız gerekir . Ancak bileşenimizin düzgün çalışması için birkaç şeyi halletmemiz gerekiyor.

<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>

• computedVue'dan ithal ettik reactive. Vue 3 Reaktiviteyi derinlemesine ele almak için başka bir Medium hikayesi yazıyorum.
• Gördüğünüz gibi, setuptüm değişkenlerimizin ve fonksiyonların içinde saklandığı bir fonksiyonumuz var. Değişkenlerinizi veya işlevlerinizi şablonunuzun içinde kullanmak istiyorsanız, bunları işlevin sonunda döndürerek ortaya çıkarmanız gerekir.
• Gördüğünüz gibi computedVariable, Vue'nun hesaplanan bir ok işlevi olarak kullanılmasıdır.
• reactiveTüm ve computeddeğişkenlerinin kullanılıp kullanılmamasının constnedeni, içlerinde letbir alıcı ve ayarlayıcı olması ve referanslarındaki verileri değiştirmek için JavaScript'in Proxy'sini kullanıyor olmalarıdır. Bu nedenle, onları yeniden başlatmamıza gerek yok.

2. Adımı Yeniden Düzenleyin: defineComponent'i kullanma

Şahsen, özellikle projenin tek koruyucusu/geliştiricisi değilseniz, tüm projeleriniz için her zaman TypeScript kullanmanız gerektiğine inanıyorum. TypeScript kullanarak, kodunuz hem makineler hem de insanlar için tahmin edilebilir hale gelir ve projemde tahmin edilebilir kod yazma alıştırmalarını şiddetle takip ediyorum. defineComponent, tür çıkarımı ile bir Vue bileşeni tanımlamak için bir tür yardımcısıdır. Hadi kontrol edelim:

<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>

• İlk olarak, değer olarak adlandırılan langve ayarlanan bir öznitelik ekleyerek kullanmak istediğimiz dilin TypeScript olduğunu açıkça beyan etmemiz gerekir .ts
• Sonra, gördüğünüz gibi, defineComponentkurulum işlevini bağımsız değişken olarak alan bir işlevdir. Bileşenimizin props, emit veya birkaç başka seçeneğe ihtiyacı varsa, bunları da bir argüman olarak iletebiliriz. Daha sonra daha karmaşık bir bileşene göz atacağız.
• Kullanıcı ve bileşenin sonucu için iki arayüz oluşturduk . Setup fonksiyonu için dönüş tipi yazmak çok yaygın olmasa da eğitim amaçlı yazdım .
• 'dan iki tür ithal ettik vue. Her ikisi de büyük harfle başlar: Computedve Reactive. Bu iki türün de görebileceğiniz gibi bir jeneriği var. Genel türlerini açıkça bildirmemiz gerekiyor.

3. Adımı Yeniden Düzenleyin: Komut Dosyası Kurulumunu Kullanma

Şimdi betiği kullanmamızın zamanı geldi setup. Önce aşağıdaki koda bir göz atalım, sonra onu analiz edeceğiz.

<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>

• Bir kez yazdıktan sonra, herhangi bir setup()yöntemi veya defineComponentkodunuzun içinde kullanmanıza gerek yoktur. Vue, ikisini de bizim için halleder.
• Lütfen şablonunuzun içinde kullanmak istediğiniz değerleri veya işlevleri döndürmenize gerek olmadığını unutmayın . Şablonunuzun içinde kullanılan her işlev ve değişken, betik bölümünüzden otomatik olarak dönecektir.

Komut dosyası kurulumunu yoğun bir şekilde düzenli olarak kullanıyorum . Son derece yararlı ve okunması kolay buldum ve çok daha yalın kodlara yol açıyor.

Arkadaşlarınla ​​paylaş! En fazla 50 kez alkışlayın.

Lütfen düşüncelerinizi ve fikirlerinizi benimle paylaşmaktan çekinmeyin. Bana Twitter'dan ulaşabilir veya portföyümü ziyaret ederek başka bir yol bulabilirsiniz .

Benden daha fazlasını okuyun: