Chào! Tôi là Hossein Mousavi , một kỹ sư Front End tại Alibaba Travels và trong câu chuyện trung bình này, chúng ta sẽ từng bước tái cấu trúc một thành phần Vue và nâng cao nó. Vì vậy, chúng ta sẽ bắt đầu?!

Thiết lập tập lệnh là gì?

<script setup>là một đường cú pháp thời gian biên dịch để sử dụng API Thành phần bên trong Thành phần tệp đơn ( SFC ). Đây là cú pháp được đề xuất để sử dụng cả SFC và API sáng tác. Tất cả những gì bạn cần làm là thêm làm setupthuộc tính của script. Để tránh gây hiểu lầm, nó chỉ khả dụng cho các thành phần SFC và bạn không thể sử dụng nó với thuộc srctính cho các tệp .js hoặc .ts bên ngoài . Nó cung cấp một cơ sở mã gọn gàng hơn và hiệu suất thời gian chạy tốt hơn. Chúng ta sẽ thảo luận về lợi ích của nó trong giây lát nhưng trước tiên, hãy đi sâu vào việc triển khai nó. Chúng tôi lấy một thành phần đơn giản với API tùy chọn và sau đó tái cấu trúc nó thành một thành phần tập lệnh thiết lập với các API tổng hợp. Hãy bắt tay vào công việc nào!

Thực hiện

Trước tiên, hãy xem một thành phần Vue tiêu chuẩn với API tùy chọn. Bạn có thể dễ dàng tìm thấy các loại thành phần này trong ứng dụng 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>

Đây là một thành phần đơn giản tập trung vào các khái niệm liên kết dữ liệu hai chiều và chúng tôi muốn cấu trúc lại thành phần này theo nhiều bước.

Tái cấu trúc Bước 1: Sử dụng API Thành phần

Để sử dụng API tổng hợp, chúng ta cần sử dụng một móc nối đặc biệt có tên: chức năng thiết lập . Nhưng chúng ta cần xử lý một số thứ để thành phần của chúng ta hoạt động bình thường.

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

• Chúng tôi đã nhập computedvà reactivetừ vue. Tôi đang viết một câu chuyện Trung bình khác để trình bày sâu hơn về Phản ứng của Vue 3.
• Như bạn có thể thấy, chúng ta có một setuphàm mà tất cả các biến và hàm của chúng ta đã được lưu trữ trong đó. Nếu bạn muốn sử dụng các biến hoặc hàm bên trong mẫu của mình, bạn cần hiển thị chúng bằng cách trả về chúng ở cuối hàm.
• Như computedVariablebạn có thể thấy đang sử dụng hàm mũi tên được tính toán của Vue.
• Lý do tất cả các biến reactivevà computedđang sử dụng constvà không sử dụng letlà vì chúng có bộ thu và bộ đặt bên trong chúng và chúng đang sử dụng Proxy của JavaScript để thay đổi dữ liệu trong tham chiếu của chúng. Do đó chúng ta không cần phải khởi tạo lại chúng.

Tái cấu trúc Bước 2: Sử dụngdefineComponent

Cá nhân tôi tin rằng bạn nên luôn sử dụng TypeScript cho tất cả các dự án của mình, đặc biệt nếu bạn không phải là người bảo trì/nhà phát triển duy nhất của dự án. Bằng cách sử dụng TypeScript, mã của bạn sẽ trở nên có thể dự đoán được đối với cả máy móc và con người và tôi đặc biệt tuân theo việc thực hành viết mã có thể dự đoán được trong dự án của mình. defineComponent là một trình trợ giúp kiểu để xác định thành phần Vue với suy luận kiểu. Hãy cùng kiểm tra nào:

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

• Đầu tiên, chúng ta cần khai báo rõ ràng rằng ngôn ngữ chúng ta muốn sử dụng là TypeScript bằng cách thêm một thuộc tính được gọi langvà đặt tslàm giá trị của nó.
• Sau đó, như bạn thấy, hàm defineComponentis lấy hàm thiết lập làm đối số. Nếu thành phần của chúng tôi cần đạo cụ, phát ra hoặc một số tùy chọn khác, chúng tôi cũng có thể chuyển chúng dưới dạng đối số. Chúng ta sẽ xem xét một thành phần phức tạp hơn sau.
• Chúng tôi đã tạo hai giao diện cho người dùng và kết quả của thành phần. Mặc dù việc viết kiểu trả về cho hàm thiết lập không phổ biến nhưng tôi đã viết nó cho mục đích giáo dục .
• Chúng tôi đã nhập hai loại từ vue. Cả hai đều bắt đầu bằng chữ in hoa: Computedvà Reactive. Hai loại này có một cái chung chung như bạn có thể thấy. Chúng ta cần khai báo rõ ràng kiểu chung của chúng.

Tái cấu trúc Bước 3: Sử dụng Thiết lập Tập lệnh

Bây giờ là lúc chúng ta sử dụng setupkịch bản. Hãy xem mã bên dưới trước và sau đó chúng tôi sẽ phân tích nó.

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

• Sau khi bạn viết nó ra, không cần sử dụng một trong hai setup()phương pháp hoặc defineComponentbên trong mã của bạn. Vue xử lý cả hai cho chúng tôi.
• Xin lưu ý rằng không cần trả về các giá trị hoặc hàm bạn muốn sử dụng bên trong mẫu của mình. Mọi chức năng và biến đang được sử dụng bên trong mẫu của bạn sẽ tự động trở về từ phần tập lệnh của bạn.

Tôi thường xuyên sử dụng thiết lập tập lệnh . Tôi đã thấy nó cực kỳ hữu ích, dễ đọc và nó dẫn đến mã gọn gàng hơn nhiều.

Chia sẻ với bạn bè của bạn! Vỗ tay tối đa 50 lần.

Xin đừng ngần ngại chia sẻ suy nghĩ và ý tưởng của bạn với tôi. Bạn có thể liên hệ với tôi trên Twitter hoặc tìm cách khác bằng cách truy cập danh mục đầu tư của tôi .

Đọc thêm từ tôi: