Vue3 - ทุกสิ่งที่คุณอยากรู้

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

Vue3 คืออะไร?

ก่อนที่เราจะพูดถึงการเปลี่ยนแปลงที่คุณจะเห็นใน Vue3 ก่อนอื่นเรามาดูว่า Vue.js และส่วนประกอบหลักคืออะไร:

วิว

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

ตามที่กล่าวไว้ข้างต้น Vue.js สร้างขึ้นจากคุณสมบัติหลักสองประการ:

การแสดงผลแบบประกาศ ช่วยให้ผู้ใช้สามารถกำหนดเอาต์พุต HTML แบบประกาศโดยขึ้นอยู่กับสถานะของ JavaScript Vue.js ขยาย HTML ปกติด้วยความช่วยเหลือของเทมเพลตไวยากรณ์

ปฏิกิริยา - Vue.js คอยตรวจสอบสถานะ JavaScript และเมื่อได้รับการแก้ไข ก็จะรีเฟรช DOM อย่างรวดเร็ว

Vue3.0

วิศวกรที่ใช้ Vue 2 ในการเขียนโค้ดจำเป็นต้องอัปเดตเป็น Vue3 นี่เป็นเพราะมันมีความสามารถใหม่ที่ทำให้การออกแบบส่วนประกอบที่อ่านได้ง่ายและสอดคล้องกันง่ายขึ้นมาก และวิธีการที่ดีกว่าในการจัดระเบียบแอปพลิเคชันของเรา Vue3 ใช้งานง่ายกว่า สั้นกว่า และดูแลรักษาง่ายกว่า คุณสมบัติเด่นบางประการของ Vue3 ได้แก่ Teleport, Fragments และ v-models หลายตัว

เวอร์ชันล่าสุดยังกำจัดตัวกรองและมีตัวแปร CSS ที่ขับเคลื่อนโดยสถานะรวมถึงคุณลักษณะการทดลองที่ต้องสงสัย นอกจากนี้ยังมีการแก้ไขการตั้งชื่อวงจรชีวิตและการแก้ไของค์ประกอบไฟล์เดียว

Vue3 เปิดตัวแล้วหรือยัง?

Vue เวอร์ชันล่าสุดที่พร้อมใช้งาน - Vue3 ได้รับการประกาศครั้งแรกเมื่อกลางปี 2018 และเผยแพร่อย่างเป็นทางการในเดือนกันยายน 2020 Vue3.0 ได้รับการประกาศให้เป็นเวอร์ชันเริ่มต้นอย่างเป็นทางการของเฟรมเวิร์ก javascript แบบโปรเกรสซีฟเมื่อวันที่ 7 กุมภาพันธ์ 2022

มีอะไรใหม่ใน Vue3?

การเปลี่ยนแปลงที่น่าตื่นเต้นที่สุดใน Vue3 คือ:

ให้/ฉีด

Vue 2 อนุญาตให้ผู้ใช้ส่งผ่านข้อมูล เช่น สตริง อาร์เรย์ อ็อบเจกต์ และอื่นๆ ผ่านอุปกรณ์ประกอบฉากในโค้ด ข้อมูลดังกล่าวสามารถส่งผ่านจากองค์ประกอบหลักไปยังองค์ประกอบย่อยได้อย่างง่ายดาย อย่างไรก็ตาม การใช้อุปกรณ์ประกอบฉากทำให้การส่งข้อมูลจากองค์ประกอบพาเรนต์ไปยังองค์ประกอบย่อยที่ซ้อนกันลึกทำได้ยากขึ้น เป็นผลให้นักพัฒนาต้องใช้ Vuex Store และ Event Hub Vue 2.2.0 ยังรวม give/inject ไว้ด้วย แต่ไม่แนะนำให้ใช้ในโค้ดโปรแกรมทั่วไป

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

เทเลพอร์ต

ตามตรรกะของแอปที่คุณต้องการสร้าง ส่วนประกอบของคุณอาจแสดงในตำแหน่งที่แตกต่างจากตำแหน่งที่คุณต้องการให้แสดง ตัวอย่างเช่น คุณอาจต้องการสร้างป๊อปอัปที่ตั้งใจให้ปรากฏและกินพื้นที่ทั้งหน้าจอ เพื่อเอาชนะสิ่งนี้ เราสามารถใช้แอตทริบิวต์ตำแหน่งของส่วนประกอบดังกล่าวใน CSS แต่ด้วย Vue3 นักพัฒนาสามารถใช้ Teleport ได้เช่นกัน

เทเลพอร์ตช่วยให้โปรแกรมเมอร์นำองค์ประกอบจากคอนเทนเนอร์เริ่มต้นที่ห่อหุ้มไว้และย้ายไปยังส่วนประกอบที่มีอยู่แล้วบนหน้าเว็บที่ใช้งานอยู่ ตัวอย่างเช่น คุณสามารถย้ายองค์ประกอบส่วนหัวจาก #app div ไปยังส่วนหัวได้ โปรดจำไว้ว่าคุณสามารถใช้ Teleport เพื่อย้ายองค์ประกอบไปยังส่วนประกอบของโค้ดที่อยู่นอก Vue DOM เท่านั้น

ชิ้นส่วน

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

Global Vue API

คุณอาจพบ Vue.component หรือ Vue.use ในไฟล์ main.js ของแอป Vue อยู่บ่อยครั้ง พวกเขาเรียกว่า Global APIs และมีวิธีการดังกล่าวมากมายใน Vue 2 ที่นี่ หากคุณมีอินสแตนซ์ของแอปหลายอินสแตนซ์ อินสแตนซ์ทั้งหมดจะอยู่บน Vue เป็นการยากที่จะจำกัดการทำงานเฉพาะสำหรับอินสแตนซ์แอปพลิเคชันเดียว

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

API เหตุการณ์

นอกจากการใช้ Vuex Store แล้ว การใช้ Event Bus ยังเป็นหนึ่งในวิธีการยอดนิยมที่โปรแกรมเมอร์ใช้ในการส่งผ่านข้อมูลระหว่างองค์ประกอบที่ไม่ได้แชร์บริบทพาเรนต์-ไชลด์ อย่างไรก็ตาม รหัสอย่างเช่น $on, $off และ $once ถูกลบทั้งหมดใน Vue3 แต่ยังคงเข้าถึง $emit ได้เนื่องจากองค์ประกอบลูกต้องปล่อยเหตุการณ์ไปยังองค์ประกอบหลัก วิธีแก้ไขปัญหานี้คือการใช้ provide/inject

ห่วงโซ่เครื่องมือสร้างที่ขับเคลื่อนด้วย Vite

ออกแบบโดย Evan You ผู้สร้าง Vue โดย Vite เป็นเครื่องมือสนับสนุน Vue SFC ชั้นยอดที่มีน้ำหนักเบาและสร้างได้รวดเร็ว Vite เป็นเครื่องมือที่อยู่เบื้องหลังการกำหนดค่าการสร้าง Vue3 มาตรฐาน ชุดรวมโมดูล @vue-cli/service ซึ่งสร้างขึ้นจาก webpack จะรวมแอปพลิเคชัน Vue ทั้งหมดของคุณเมื่อเปิดใช้งาน รีโหลดด่วน และคอมไพล์ ในทางกลับกัน Vite จะใช้ไวยากรณ์การนำเข้า ES จากโค้ดโปรแกรมของคุณและอนุญาตให้เบราว์เซอร์วิเคราะห์การนำเข้าแต่ละครั้งก่อนที่จะส่งคำขอ HTTP

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

ไวยากรณ์ API ขององค์ประกอบ

Options API ใช้สำหรับสร้างสถานะองค์ประกอบและตรรกะ Composition API เปิดตัวโดย Vue3 เพื่อทดแทนสิ่งเดียวกัน เป็นเพียงชุดของ API ที่ทำให้เราสามารถสร้างองค์ประกอบ Vue โดยไม่ต้องกำหนดตัวเลือกโดยใช้วิธีการนำเข้า

Composition API ประกอบด้วย API ต่อไปนี้:

Reactivity API - ตัวอย่างเช่น ref() และ reactive() สามารถสร้างสถานะปฏิกิริยา สถานะคำนวณ และผู้เฝ้าดูได้โดยตรงโดยใช้สิ่งนี้

Lifecycle hooks - ตัวอย่างเช่น onMounted() และ onUnmounted() เราสามารถเชื่อมต่อกับวงจรชีวิตองค์ประกอบโดยใช้ตะขอวงจรชีวิต

การฉีดการพึ่งพา - ตัวอย่างเช่น จัดเตรียม () และ ฉีด () การใช้ระบบฉีดขึ้นต่อกันของ Vue กับ Reactivity API นั้นเกิดขึ้นได้ด้วยการฉีดขึ้นต่อกัน

ข้อดีของการใช้ API การเรียบเรียง

ข้อได้เปรียบหลักของการใช้ Composition APIs เหนือ Options API คือ:

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

พิเนีย

Pinia เป็นเครื่องมือจัดการสถานะที่มีน้ำหนักเบาสำหรับ Vue.js ช่วยให้เราสามารถแบ่งปันสถานะระหว่างองค์ประกอบและหน้า มันสร้างกรอบการจัดการสถานะที่พิมพ์อย่างสมบูรณ์และเป็นมิตรกับผู้ใช้โดยใช้แนวคิดปฏิกิริยาใหม่ใน Vue3 นี่คือไลบรารีการควบคุมสถานะมาตรฐานใหม่ของ Vue3

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

ทำไมต้องพีเนีย?

Pinia นั้นเบามาก เพียง 1KB เท่านั้น นอกจากนี้ยังรวมเข้ากับเครื่องมือ Vue.js dev เพื่อปรับปรุงประสบการณ์การเขียนโค้ดของคุณใน Vue 2 และ Vue3 เนื่องจาก Pinia อนุมานประเภทข้อมูลทั้งหมดของคุณ จึงสามารถนำเสนอการเติมข้อความอัตโนมัติที่สมบูรณ์และแม่นยำในจาวาสคริปต์ได้เช่นกัน นอกจากนี้ Pinia ยังเป็นโมดูลาร์โดยการออกแบบ ใช้งานง่าย และขยายได้ โดยรวมแล้ว Pinia ดูเหมือนจะมีน้ำหนักเบา ไม่ซับซ้อน และตรงไปตรงมา มันคล้ายกับการจัดการกับองค์ประกอบต่าง ๆ และมีเครื่องมือทั้งหมดที่จำเป็นสำหรับการเขียนโปรแกรมแบบไดนามิกใน Vue3

Vue 2 จะเลิกใช้หรือไม่

การอัปเดตย่อยครั้งล่าสุดสำหรับ Vue 2 คือ Vue 2.7 ซึ่งเผยแพร่ในเดือนกรกฎาคม 2565 ปัจจุบัน Vue 2 อยู่ในโหมดบำรุงรักษา แม้ว่าจะไม่มีการจัดส่งฟีเจอร์เพิ่มเติม แต่จะยังคงได้รับการแก้ไขข้อบกพร่องที่สำคัญและแพตช์ความปลอดภัยเป็นเวลา 18 เดือน ภายในสิ้นปี 2566 Vue 2 จะเลิกใช้งาน

การโยกย้ายจาก Vue 2

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

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

Vue.js ในโครงการ AppMaster

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

เราใช้วิธีการพิเศษที่เรียกว่า micro-frontends หรือ front-end microservices เพื่อให้สามารถพัฒนาผลิตภัณฑ์ของเราได้อย่างรวดเร็วและมีประสิทธิภาพ ตัวอย่างเช่น ตัว แก้ไขโมเดลข้อมูลและตัวแก้ไข กระบวนการทางธุรกิจ แต่ละตัวเป็นแอปพลิเคชันส่วนหน้าที่แยกกันโดยสิ้นเชิงในแพลตฟอร์มของเรา สิ่งนี้ช่วยให้เราสามารถพัฒนาได้อย่างรวดเร็วและเป็นอิสระจากมุมมองของทีมพัฒนา ซึ่งจะเพิ่มความเร็วโดยรวมของผลิตภัณฑ์ของเรา ข้อดีทั้งหมดนี้ลูกค้าของเราสามารถใช้แอปพลิเคชันของเราได้

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

เกี่ยวกับไม่มีรหัส

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

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

ข้อสรุป

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