การย้ายไปยัง Vue 3 Composition API เพื่อการพัฒนาส่วนประกอบที่ดีขึ้น

เนื่องจากผู้สร้าง Vue ได้ประกาศว่า Vue 2 จะสิ้นสุดอายุการใช้งานภายในวันที่ 31 ธันวาคม 2023 นักพัฒนาจึงได้รับการสนับสนุนให้เปลี่ยนไปใช้ Vue 3

การเปิดตัววิวัฒนาการนี้ทำให้เกิด Composite Application Platform Interface ซึ่งนำเสนอวิธีการที่มีประสิทธิภาพ ชัดเจน และปลอดภัยยิ่งขึ้นสำหรับการสร้างโปรเจ็กต์ Vue ผ่านหลักการออกแบบแบบโมดูลาร์และการประกาศ

API องค์ประกอบคืออะไร

การเกิดขึ้นของ Composition API บ่งบอกถึงความแตกต่างที่สำคัญจากวิธีการทั่วไปที่ใช้ในการประดิษฐ์ส่วนประกอบ Vue โดยใช้ออบเจ็กต์ Options การใช้เทคนิคที่ก้าวหน้านี้สอดคล้องกับกรอบความคิดที่กล้าแสดงออกและกล้าแสดงออกมากขึ้น ซึ่งเน้นที่การมุ่งเน้นที่การสร้างแอปพลิเคชัน Vue โดยไม่ต้องถูกกีดขวางจากลักษณะเฉพาะของการนำไปใช้งานที่ซับซ้อน

แรงจูงใจสำหรับ Composition API

นักพัฒนาของ Vue ระบุปัญหาที่เกี่ยวข้องกับการใช้อ็อบเจ็กต์ Options ในการสร้างเว็บแอปพลิเคชันที่ซับซ้อนเมื่อขนาดโปรเจ็กต์เพิ่มขึ้น โดยเฉพาะอย่างยิ่ง การจัดการตรรกะของส่วนประกอบนั้นมีความเป็นไปได้น้อยลงในขนาดใหญ่ และยากต่อการรักษาภายในการตั้งค่าการทำงานร่วมกัน

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

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

ประโยชน์ของ Composition API

การใช้ Composition API นำเสนอประโยชน์มากมายเมื่อเปรียบเทียบกับ Options API ซึ่งช่วยปรับปรุงฟังก์ชันการทำงานโดยรวมและประสบการณ์ผู้ใช้

ปรับปรุงประสิทธิภาพ

Vue 3 ได้นำเสนอแนวทางการเรนเดอร์ที่เป็นนวัตกรรมที่เรียกว่า Proxy-based Reactivity System ซึ่งได้รับการออกแบบมาเพื่อปรับปรุงทั้งประสิทธิภาพและความสามารถในการโต้ตอบ ด้วยการลดการใช้หน่วยความจำและเพิ่มประสิทธิภาพปฏิกิริยา ระบบใหม่นี้ช่วยให้การจัดการลำดับชั้นส่วนประกอบที่ครอบคลุมมีประสิทธิภาพมากขึ้น

ขนาดมัดเล็กลง

เนื่องจากสถาปัตยกรรมที่ได้รับการปรับปรุงและการจัดสรรทรัพยากรที่มีประสิทธิภาพโดยโค้ดเบสที่ได้รับการปรับปรุงและความสามารถในการเขย่าต้นไม้ของ Vue 3 ทำให้มีชุดข้อมูลที่มีขนาดกะทัดรัดมากขึ้นเมื่อเทียบกับรุ่นก่อน ส่งผลให้เวลาในการโหลดเร็วขึ้นและประสิทธิภาพโดยรวมดีขึ้น

ปรับปรุงองค์กรรหัส

ด้วยการใช้ความสามารถของ Composition API คุณสามารถแยกซอร์สโค้ดของส่วนประกอบออกเป็นหน่วยโมดูลาร์ที่สามารถจัดการได้มากขึ้น ผ่านการปรับใช้ฟังก์ชันที่มีขนาดเล็กลงและนำกลับมาใช้ใหม่ได้ วิธีการดังกล่าวไม่เพียงแต่ช่วยเพิ่มความเข้าใจและอำนวยความสะดวกในการบำรุงรักษาอย่างต่อเนื่อง แต่ยังทำหน้าที่เป็นกลยุทธ์ที่มีคุณค่าในการจัดการกับความท้าทายที่เกิดจากองค์ประกอบที่ซับซ้อนและกว้างขวาง

การนำส่วนประกอบและฟังก์ชันกลับมาใช้ซ้ำได้

การใช้ฟังก์ชันการจัดองค์ประกอบช่วยให้สามารถบูรณาการและนำโค้ดกลับมาใช้ใหม่ภายในส่วนประกอบต่างๆ ได้อย่างราบรื่น ส่งผลให้มีไลบรารีฟังก์ชันที่ใช้ร่วมกันที่มีประสิทธิภาพ

รองรับ TypeScript ที่ดีกว่า

การเปิดตัว Composition API ได้ปรับปรุงระดับการสนับสนุน TypeScript ภายใน Visual Studio Code อย่างมีนัยสำคัญ ส่งผลให้มีระดับความแม่นยำที่สูงขึ้นเกี่ยวกับการอนุมานประเภท ตลอดจนความสามารถที่เพิ่มขึ้นในการตรวจจับและแก้ไขความคลาดเคลื่อนในการพิมพ์ในระหว่างกระบวนการพัฒนา

การเปรียบเทียบระหว่างออบเจ็กต์ตัวเลือกและ API องค์ประกอบ

ด้วยความคุ้นเคยกับพื้นฐานทางทฤษฎีของ Composition API ของ React คุณก็พร้อมที่จะนำความรู้นี้ไปใช้ในบริบทเชิงปฏิบัติแล้ว การเปรียบเทียบระหว่างคุณประโยชน์ที่นำเสนอโดย Composition API กับประโยชน์ที่ได้รับจากส่วนประกอบของคลาส จะช่วยให้ความกระจ่างถึงคุณค่าที่นำเสนอ

ข้อมูลปฏิกิริยาใน Vue 3

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

Vue 2 ใช้เมธอด Object.defineProperty เป็นรากฐานสำหรับระบบรีแอกทีฟ โดยระบบดังกล่าวถูกสร้างขึ้นบนออบเจ็กต์ข้อมูลที่ครอบคลุมคุณสมบัติรีแอกทีฟทั้งหมดภายในแอปพลิเคชัน

การใช้ตัวเลือก data ภายในส่วนประกอบ Vue ช่วยให้สามารถใช้งานเมธอด getter และ setter ที่สอดคล้องกับ ES6 โดยอัตโนมัติรอบๆ แต่ละคุณสมบัติที่มีอยู่ภายในอ็อบเจ็กต์ data

getter และ setters ที่กล่าวมาข้างต้นจะตรวจสอบการพึ่งพาซึ่งกันและกันระหว่างคุณลักษณะต่างๆ และปรับอินเทอร์เฟซผู้ใช้แบบไดนามิกเพื่อตอบสนองต่อการแก้ไขที่ทำกับคุณลักษณะเหล่านี้

ในลักษณะที่ละเอียดยิ่งขึ้น ต่อไปนี้เป็นภาพประกอบที่สาธิตการสร้างข้อมูลที่ตอบสนองใน Vue 2 โดยใช้อ็อบเจ็กต์ Options:

 <template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },

  methods: {
    increment() {
      this.count\+\+;
    },
  },
};
</script>

ในตัวอย่างนี้ เราแสดงให้เห็นกระบวนการสร้างตัวแปรที่ไม่แน่นอนภายในบริบทของ Vue.js ทันทีที่มีการกำหนดตัวแปรภายในออบเจ็กต์ data ตัวแปรนั้นจะเปิดรับการเปลี่ยนแปลงและอัปเดตโดยธรรมชาติ ซึ่งส่งผลให้มีการปรับเปลี่ยนอินเทอร์เฟซผู้ใช้ของแอปพลิเคชันที่เกี่ยวข้อง

นอกจากนี้ คุณใช้อ็อบเจ็กต์ วิธีการ เพื่อใช้ฟังก์ชัน JavaScript ที่ใช้ในส่วนประกอบ ในกรณีนี้ บล็อคโค้ดจะอธิบายฟังก์ชัน increat() ซึ่งจะเพิ่มค่าของตัวแปร count ทีละตัว

ในการใช้ฟังก์ชันเป็นวิธีการภายในแอปพลิเคชัน Vue 2 จำเป็นอย่างยิ่งที่จะต้องใช้คีย์เวิร์ด"this"ควบคู่ไปกับการเรียกใช้ฟังก์ชันและตัวแปรที่เกี่ยวข้อง เนื่องจากคีย์เวิร์ด “นี้” ทำหน้าที่อ้างอิงตัวแปรของออบเจ็กต์ข้อมูลที่เกี่ยวข้อง การไม่รวมคีย์เวิร์ด"นี้"ในขณะที่แสดงผลส่วนประกอบจะส่งผลให้เกิดข้อผิดพลาดที่ถูกสร้างขึ้นโดย Vue ในระหว่างกระบวนการติดตั้ง

Vue 3 ได้ใช้ระบบปฏิกิริยาที่ใช้พร็อกซีซึ่งใช้ประโยชน์จากพลังของพร็อกซี JavaScript เพื่อปรับปรุงฟังก์ชันการทำงาน แนวทางใหม่นี้มอบคุณประโยชน์ด้านประสิทธิภาพที่โดดเด่น ตลอดจนการจัดการการปรับปรุงการพึ่งพาเชิงรับ ส่งผลให้ประสบการณ์การพัฒนาโดยรวมมีประสิทธิภาพมากขึ้น

Vue มีฟังก์ชันสองประเภทสำหรับกำหนดข้อมูลเชิงโต้ตอบ-ฟังก์ชัน ref และฟังก์ชัน reactive แบบแรกสร้างการอ้างอิงเชิงปฏิกิริยาเดี่ยวไปยังค่าเฉพาะ ในขณะที่แบบหลังสร้างโครงสร้างเชิงปฏิกิริยาทั้งหมดซึ่งประกอบด้วยคุณสมบัติมากมาย

ในกรณีนี้ เราจะอธิบายกระบวนการสร้างข้อมูลที่ตอบสนองโดยใช้ฟังก์ชัน ref ภายในบริบทของ Vue 3:

 <script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value\+\+;
}
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

ในการใช้ฟังก์ชัน ref() ภายในบริบทของ Vue 3 จะต้องนำเข้าฟังก์ชันดังกล่าวจากแพ็คเกจ Vue ก่อน ฟังก์ชันนี้ทำหน้าที่เป็นวิธีการสร้างการอ้างอิงเชิงโต้ตอบไปยังตัวแปรต่างๆ

โค้ด JavaScript ที่ให้มาใช้ฟังก์ชัน ref() เพื่อสร้างการอ้างอิงไปยังตัวแปร count โดยตั้งค่าเริ่มต้นเป็น"0"ต่อจากนั้น จะกำหนดออบเจ็กต์ที่ส่งคืนจากฟังก์ชัน ref() ให้กับตัวแปร count อ็อบเจ็กต์ดังกล่าวมีคุณสมบัติเดียวชื่อ value ซึ่งทำหน้าที่เป็นที่เก็บข้อมูลที่ไม่แน่นอนสำหรับสถานะปัจจุบันของตัวแปร count

คำสั่ง @click ถูกใช้ภายในกรอบงาน Vue เพื่อจัดการและตอบสนองต่อเหตุการณ์การคลิกที่เกิดขึ้นภายในอินเทอร์เฟซที่แสดงผลของส่วนประกอบ กลไกการเชื่อมโยงเหตุการณ์นี้ช่วยให้สามารถจัดการการโต้ตอบของผู้ใช้ได้ตามความต้องการ ช่วยให้นักพัฒนาสามารถรวมฟังก์ชันการทำงานแบบไดนามิกหรือทริกเกอร์การดำเนินการเฉพาะเมื่อตรวจพบเหตุการณ์การคลิก

ใน Vue 3 ไวยากรณ์เมธอดสำหรับการกำหนดฟังก์ชันในส่วนประกอบได้ถูกแทนที่ด้วยการใช้ฟังก์ชัน JavaScript มาตรฐาน ฟังก์ชันเหล่านี้ถูกกำหนดไว้ภายในบล็อก การตั้งค่า ของสคริปต์ของส่วนประกอบ

ตอนนี้เราสามารถใช้คุณสมบัติปฏิกิริยาที่สร้างขึ้นผ่านการประยุกต์ใช้ฟังก์ชัน ref() โดยการเชื่อมโยงวิธีการส่งกลับค่ากับตัวระบุที่กำหนด ตามภาพประกอบ ตัวอย่างโค้ดที่ให้มาใช้ไวยากรณ์"count.value"เพื่อกล่าวถึงสถานะปัจจุบันของคุณสมบัติปฏิกิริยา"count"

ฟังก์ชันการคำนวณใน Vue 3

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

ใน Vue 2 เราจะกำหนดพฤติกรรมการคำนวณของส่วนประกอบโดยใช้ตัวเลือก"คำนวณ"ที่อยู่ภายในส่วนประกอบดังกล่าว มีภาพประกอบตัวอย่างด้านล่าง:

 <template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  methods: {
    incrementCount() {
      this.count\+\+;
    }
  }
};
</script>

ในภาพประกอบข้างต้น คุณสมบัติที่คำนวณ doubleCount ขึ้นอยู่กับคุณสมบัติข้อมูล count หากคุณสมบัติ count ได้รับการเปลี่ยนแปลงใดๆ Vue จะประเมินคุณสมบัติ doubleCount อีกครั้งตามนั้น

ใน Vue 3 การแนะนำ Composition API นำเสนอแนวทางใหม่ในการกำหนดคุณสมบัติที่คำนวณผ่านการใช้ประโยชน์จากฟังก์ชัน คำนวณ ไวยากรณ์สำหรับการใช้งานนี้เป็นดังนี้:

 <script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

const incrementCount = () => {
  count.value\+\+;
};
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>

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

ในข้อมูลโค้ดที่ให้มา เราได้กำหนดคุณสมบัติการคำนวณชื่อ"doubleCount"โดยใช้ฟังก์ชันที่คำนวณได้ ระบบการตั้งชื่อนี้เน้นการพึ่งพาคุณสมบัติที่คำนวณกับแหล่งข้อมูลแบบรีแอกทีฟ ซึ่งเป็นคุณลักษณะเด่นของเฟรมเวิร์กของ Vue 3

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

เป็นที่น่าสังเกตว่าบล็อกโค้ดที่สร้างขึ้นโดยใช้ Composition API มีแนวโน้มที่จะอ่านได้ชัดเจนและกระชับมากกว่าเมื่อเปรียบเทียบกับบล็อกโค้ดที่สร้างขึ้นโดยใช้ออบเจ็กต์ Options

เรียนรู้การสร้างคำสั่งที่กำหนดเองใน Vue

Composition API ของ Vue 3 นำเสนอวิธีการที่มีประสิทธิภาพและหลากหลายสำหรับการจัดโครงสร้างและการวางโค้ดใหม่ภายในเทมเพลตส่วนประกอบ ช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชัน Vue ที่มีความคล่องตัวและจัดการได้มากขึ้น ผ่านโมดูลาร์และความสามารถในการบำรุงรักษาที่เพิ่มขึ้น

Vue มีฟังก์ชันเพิ่มเติมที่ช่วยเพิ่มประสิทธิภาพในการสร้างเว็บแอปพลิเคชัน สามารถรับความรู้เกี่ยวกับวิธีการพัฒนาคำสั่งที่ปรับแต่งโดยเฉพาะ ซึ่งช่วยให้สามารถนำฟังก์ชันเฉพาะไปใช้ในส่วนต่างๆ ของโปรเจ็กต์ Vue ได้