เฮ้! ฉันชื่อHossein Mousaviเป็นวิศวกร Front End ของAlibaba Travelsและในเรื่องที่เป็นกลางนี้ เราจะปรับโครงสร้างส่วนประกอบ Vue ทีละขั้นตอนและปรับปรุงให้ดีขึ้น งั้นเรามาเริ่มกันเลยดีไหม!

การตั้งค่าสคริปต์คืออะไร?

<script setup>เป็นน้ำตาลวากยสัมพันธ์เวลาคอมไพล์สำหรับการใช้Composition APIภายใน Single-File Components ( SFCs ) เป็นไวยากรณ์ที่แนะนำสำหรับการใช้ทั้ง SFC และ Composition API สิ่งที่คุณต้องทำคือเพิ่มsetupเป็นแอตทริบิวต์scriptของ เพื่อป้องกันการเข้าใจผิด จึงใช้ได้เฉพาะกับคอมโพเนนต์ SFC และคุณไม่สามารถใช้กับแอตทริบิวต์srcสำหรับไฟล์.jsหรือ.ts ภายนอกได้ ให้ฐานโค้ดที่บางกว่าและประสิทธิภาพรันไทม์ที่ดีกว่า เราจะพูดถึงประโยชน์ของมันในอีกสักครู่ แต่ก่อนอื่นเรามาดำดิ่งสู่การนำไปใช้ เราคว้าองค์ประกอบง่ายๆ ด้วยตัวเลือก APIจากนั้นปรับโครงสร้างใหม่เป็นองค์ประกอบสคริปต์การตั้งค่าด้วยAPI การเรียบเรียง. มาเริ่มธุรกิจกันเถอะ!

การดำเนินการ

ก่อนอื่น มาดูส่วนประกอบ Vue มาตรฐานกับ Option API คุณสามารถค้นหาส่วนประกอบประเภทนี้ในแอปพลิเคชัน 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>

นี่เป็นส่วนประกอบที่เรียบง่ายโดยเน้นที่แนวคิดการเชื่อมโยงข้อมูลแบบสองทาง และเราต้องการปรับโครงสร้างส่วนประกอบนี้ใหม่ในหลายขั้นตอน

Refactor ขั้นตอนที่ 1: การใช้ Composition API

ในการใช้ API การเรียบเรียง เราจำเป็นต้องใช้ hook พิเศษที่เรียกว่า: the setup function แต่เราต้องจัดการบางอย่างเพื่อให้ส่วนประกอบของเราทำงานได้อย่างถูกต้อง

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

• เราได้นำเข้าcomputedและreactiveจาก vue ฉันกำลังเขียนเรื่อง Medium อีกเรื่องเพื่อครอบคลุม Vue 3 Reactivity ในเชิงลึก
• อย่างที่คุณเห็น เรามีsetupฟังก์ชันที่ตัวแปรและฟังก์ชันทั้งหมดของเราถูกเก็บไว้ในนั้น หากคุณต้องการใช้ตัวแปรหรือฟังก์ชันภายในเทมเพลตของคุณ คุณต้องแสดงตัวแปรเหล่านั้นโดยส่งค่ากลับมาที่ส่วนท้ายของฟังก์ชัน
• อย่างcomputedVariableที่คุณเห็นคือการใช้ Vue ที่คำนวณเป็นฟังก์ชันลูกศร
• เหตุผลที่ ตัวแปร reactiveand ทั้งหมด computedกำลังใช้constและไม่ใช่letคือมี getter และ setter อยู่ข้างในและใช้ Proxy ของ JavaScript เพื่อเปลี่ยนข้อมูลภายในการอ้างอิง ดังนั้นเราจึงไม่จำเป็นต้องสร้างใหม่อีกครั้ง

Refactor ขั้นตอนที่ 2: การใช้defineComponent

โดยส่วนตัวแล้วฉันเชื่อว่าคุณควรใช้ TypeScript สำหรับโครงการทั้งหมดของคุณเสมอ โดยเฉพาะอย่างยิ่งหากคุณไม่ใช่ผู้ดูแล/ผู้พัฒนาโครงการเพียงคนเดียว เมื่อใช้ TypeScript โค้ดของคุณจะสามารถคาดเดาได้สำหรับทั้งเครื่องจักรและมนุษย์ และฉันปฏิบัติตามการฝึกเขียนโค้ดที่คาดเดาได้ในโครงการของฉันอย่างจริงจัง defineComponentเป็นตัวช่วยประเภทสำหรับกำหนดองค์ประกอบ Vue ด้วยการอนุมานประเภท ลองดูกัน:

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

• ก่อนอื่น เราต้องประกาศอย่างชัดเจนว่าภาษาที่เราต้องการใช้คือ TypeScript โดยเพิ่มแอตทริบิวต์ที่เรียกlangและตั้งtsค่าเป็นค่า
• อย่างที่คุณเห็น the defineComponentเป็นฟังก์ชันที่ใช้ฟังก์ชัน setup เป็นอาร์กิวเมนต์ หากส่วนประกอบของเราต้องการอุปกรณ์ประกอบฉาก เปล่งเสียง หรือตัวเลือกอื่นๆ เราสามารถส่งต่อเป็นอาร์กิวเมนต์ได้เช่นกัน เราจะดูส่วนประกอบที่ซับซ้อนกว่านี้ในภายหลัง
• เราได้สร้างสองอินเทอร์เฟซสำหรับผู้ใช้และผลลัพธ์ของคอมโพเนนต์ แม้ว่าการเขียนประเภทการ ส่งคืนสำหรับฟังก์ชันการตั้งค่าจะไม่ใช่เรื่องปกติ แต่ฉันได้เขียนขึ้นเพื่อวัตถุประสงค์ทางการศึกษา
• เราได้นำเข้าสองประเภทvueจาก ทั้งคู่ขึ้นต้นด้วยตัวพิมพ์ใหญ่: ComputedและReactive. ทั้งสองประเภทนี้มีลักษณะทั่วไปอย่างที่คุณเห็น เราจำเป็นต้องประกาศประเภททั่วไปอย่างชัดเจน

Refactor ขั้นตอนที่ 3: การใช้การตั้งค่าสคริปต์

ตอนนี้ถึงเวลาที่เราจะใช้setupสคริปต์ ลองดูโค้ดด้านล่างก่อนแล้วเราจะวิเคราะห์

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

• เมื่อคุณเขียนลงไปแล้ว คุณไม่จำเป็นต้องใช้setup()วิธีใดวิธีหนึ่งหรือdefineComponentภายในโค้ดของคุณ The Vue จัดการทั้งสองอย่างให้เรา
• โปรดทราบว่า ไม่จำเป็นต้องส่งคืน ค่าหรือฟังก์ชันที่คุณต้องการใช้ภายในเทมเพลตของคุณ ทุกฟังก์ชันและตัวแปรที่ถูกใช้ภายในเทมเพลตของคุณจะกลับมาโดยอัตโนมัติจากส่วนสคริปต์ของคุณ

ฉันใช้การตั้งค่าสคริปต์อย่างหนักเป็นประจำ ฉันพบว่ามันมีประโยชน์อย่างมาก และอ่านง่าย และนำไปสู่โค้ดที่บางลงมาก

แบ่งปันกับเพื่อนของคุณ! ปรบมือ สูงสุด 50 ครั้ง

โปรดอย่าลังเลที่จะแบ่งปันความคิดและแนวคิดของคุณกับฉัน คุณสามารถติดต่อฉันทางTwitter หรือค้นหาวิธีอื่นโดยไปที่พอร์ตโฟลิโอ ของฉัน

อ่านเพิ่มเติมจากฉัน: