Hai! Saya Hossein Mousavi seorang insinyur Front End di Alibaba Travels , dan dalam cerita menengah ini, kami akan memperbaiki komponen Vue selangkah demi selangkah dan menyempurnakannya. Jadi, akankah kita mulai?!

Apa itu Pengaturan Skrip?

<script setup>adalah gula sintaksis waktu kompilasi untuk menggunakan Composition API di dalam Single-File Components ( SFCs ). Ini adalah sintaks yang direkomendasikan untuk menggunakan SFC dan API Komposisi. Yang perlu Anda lakukan adalah menambahkan setupsebagai atribut script. Untuk mencegah penyesatan, ini hanya tersedia untuk komponen SFC, dan Anda tidak dapat menggunakannya dengan atribut srcuntuk file .js atau .ts eksternal . Ini memberikan basis kode yang lebih ramping dan kinerja runtime yang lebih baik. Kami akan membahas manfaatnya sebentar lagi, tetapi pertama-tama, mari selami penerapannya. Kami mengambil komponen sederhana dengan API opsi dan kemudian memfaktorkan ulangnya menjadi komponen skrip penyiapan dengan API komposisi. Mari kita mulai bisnis!

Penerapan

Pertama, mari kita lihat komponen Vue standar dengan Option API. Anda bisa menemukan komponen-komponen seperti ini di aplikasi Vue 2 dengan mudah.

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

Ini adalah komponen sederhana dengan fokus pada konsep pengikatan data dua arah dan kami ingin memfaktorkan ulang komponen ini dalam beberapa langkah.

Refactor Langkah 1: Menggunakan API Komposisi

Untuk menggunakan API komposisi, kita perlu menggunakan pengait khusus yang disebut: fungsi setup . Tetapi kita perlu menangani beberapa hal agar komponen kita berfungsi dengan baik.

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

• Kami telah mengimpor computeddan reactivedari vue. Saya sedang menulis cerita Medium lainnya untuk membahas Reaktivitas Vue 3 secara mendalam.
• Seperti yang Anda lihat, kami memiliki setupfungsi yang semua variabel kami, dan fungsi telah disimpan di dalamnya. Jika Anda ingin menggunakan variabel atau fungsi di dalam template, Anda perlu membukanya dengan mengembalikannya di akhir fungsi.
• Seperti computedVariableyang Anda lihat menggunakan Vue yang dihitung sebagai fungsi panah.
• Alasan semua variabel reactivedan computeddigunakan constdan tidak letadalah karena mereka memiliki pengambil dan penyetel di dalamnya dan mereka menggunakan Proksi JavaScript untuk mengubah data dalam referensi mereka. Karenanya kita tidak perlu membuat ulang mereka.

Refactor Langkah 2: Menggunakan defineComponent

Saya pribadi percaya bahwa Anda harus selalu menggunakan TypeScript untuk semua proyek Anda terutama jika Anda bukan satu-satunya pengelola/pengembang proyek. Dengan menggunakan TypeScript, kode Anda akan dapat diprediksi untuk mesin dan manusia dan saya sangat mengikuti praktik menulis kode yang dapat diprediksi dalam proyek saya. defineComponent adalah penolong tipe untuk mendefinisikan komponen Vue dengan inferensi tipe. Mari kita periksa:

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

• Pertama, kita perlu mendeklarasikan secara eksplisit bahwa bahasa yang ingin kita gunakan adalah TypeScript dengan menambahkan atribut yang dipanggil langdan ditetapkan tssebagai nilainya.
• Kemudian seperti yang Anda lihat, the defineComponentadalah fungsi yang menggunakan fungsi setup sebagai argumen. Jika komponen kita membutuhkan props, emit, atau beberapa opsi lainnya, kita juga bisa meneruskannya sebagai argumen. Kita akan melihat komponen yang lebih rumit nanti.
• Kami telah membuat dua antarmuka untuk pengguna dan hasil komponen. Meskipun menulis tipe pengembalian untuk fungsi penyiapan tidak begitu umum, saya telah menulisnya untuk tujuan pendidikan .
• Kami telah mengimpor dua jenis dari vue. Keduanya dimulai dengan huruf kapital: Computeddan Reactive. Kedua jenis ini memiliki generik seperti yang Anda lihat. Kita perlu mendeklarasikan tipe generiknya secara eksplisit.

Refactor Langkah 3: Menggunakan Script Setup

Sekarang saatnya kita menggunakan setupskrip. Mari kita lihat kode di bawah ini terlebih dahulu dan kemudian kita akan menganalisisnya.

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

• Setelah Anda menuliskannya, tidak perlu menggunakan salah satu setup()metode atau defineComponentdi dalam kode Anda. Vue menangani keduanya untuk kita.
• Harap diperhatikan bahwa tidak perlu mengembalikan nilai atau fungsi yang ingin Anda gunakan di dalam template Anda. Setiap fungsi dan variabel yang digunakan di dalam template Anda secara otomatis akan kembali dari bagian skrip Anda.

Saya menggunakan pengaturan skrip secara teratur. Saya merasa ini sangat berguna, dan mudah dibaca serta menghasilkan kode yang lebih ramping.

Bagikan dengan temanmu! Tepuk maksimal 50 kali.

Tolong jangan ragu untuk berbagi pemikiran dan ide Anda dengan saya. Anda dapat menghubungi saya di Twitter atau mencari cara lain dengan mengunjungi portofolio saya .

Baca lebih lanjut dari saya: