Question 1

ระบบ reactivity ของ Vue คืออะไร?

Accepted Answer

ระบบ reactivity ของ Vue จะตรวจจับการเปลี่ยนแปลงในข้อมูลโดยอัตโนมัติและอัปเดต DOM ตามนั้น โดยอาศัย Proxy ของ JavaScript ที่ดักจับการเข้าถึงและการแก้ไขพร็อพเพอร์ตี้ ระบบนี้รับประกันว่าส่วนติดต่อผู้ใช้จะยังคงซิงโครไนซ์กับสถานะของแอปพลิเคชันโดยไม่ต้องแทรกแซงด้วยตนเอง

Question 2

ความแตกต่างหลักระหว่าง ref() กับ reactive() คืออะไร?

Accepted Answer

ref() สร้าง reactive reference สำหรับค่า primitive หรือ object โดยเข้าถึงผ่าน .value ในขณะที่ reactive() สร้าง reactive proxy ของ object โดยไม่ต้องใช้ .value ในการเข้าถึงพร็อพเพอร์ตี้ ref() ใช้ได้ทั่วไป (primitive + object) และเหมาะกับค่าที่เรียบง่าย ส่วน reactive() ถูกปรับให้เหมาะกับ object แต่ใช้กับค่า primitive ไม่ได้ ในทางปฏิบัติ มักนิยมใช้ ref() เพราะทำงานได้กับทุกชนิดข้อมูล

Question 3

จะเข้าถึงค่าของ ref ใน template เทียบกับใน script ได้อย่างไร?

Accepted Answer

ใน template นั้น Vue จะ unwrap refs โดยอัตโนมัติ ทำให้เข้าถึงได้โดยตรงโดยไม่ต้องใช้ .value (เช่น {{ count }}) ส่วนใน script คุณต้องใช้ .value เพื่ออ่านหรือแก้ไขค่าของ ref (เช่น count.value++) พฤติกรรมอัตโนมัตินี้ใน template ช่วยให้เขียนโค้ดง่ายขึ้นในขณะที่ยังคงการควบคุมอย่างชัดเจนในตรรกะ JavaScript

ระบบ Reactivity ของ Vue