เช้านี้อ่านเจอการพูดคุยเรื่องของความแตกต่างระหว่าง Method และ Computed property ใน Vue.js
ซึ่งเป็นความสามารถที่อาจจะทำให้สับสนได้
ดังนั้นมาดูรายละเอียด และ code ตัวอย่างกัน
มาเริ่มกันเลย

Vue.js มันคือ reactive

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

โดยใน Vue.js จะมี 3 component ให้ใช้งานคือ

  1. Method
  2. Computed property
  3. Watcher

ทั้งสาม component นี้ดูแล้วอาจจะคล้ายหรือเหมือนกัน
แต่กลับเหมาะสมกับงานหรือ usecase ที่ต่างกัน

ก่อนอื่นมาลองเขียน code เพื่อใช้งานทั้งสาม component กันดีกว่า
เพื่อทำให้เห็นภาพและการใช้งานชัดเจนขึ้น

1. Method

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

มาดูตัวอย่างการใช้งาน method กันบ้าง
เป็นระบบการเพิ่มข้อมูลคะแนนของนักศึกษาเข้าระบบ
ประกอบไปด้วย ชื่อ และ คะแนน
เมื่อกรอกข้อมูลเสร็จแล้วให้กดปุ่มเพิ่มข้อมูล
สามารถเขียน code ได้ดังนี้

2. Computed property

เราจะใช้เมื่อต้องการแก้ไขข้อมูลบางตัว
ซึ่งผูกมัดกับข้อมูลอื่น ๆ
จากตัวอย่างนั้น ถ้าผมต้องการหาค่าเฉลี่ยของคะแนน
จะเปลี่ยนไปเมื่อมีการเพิ่มข้อมูลคะแนนของนักศึกษาเข้ามา
ถ้าเกิดเหตุการณ์แบบนี้ เราสามารถนำ Computed property มาใช้ได้
เพื่อแยกส่วนการคำนวณออกไปจากส่วนการรับข้อมูลจากผู้ใช้งาน
โดยที่ Computed property จะคอยตรวจสอบการเปลี่ยนแปลงให้เราเอง
จากนั้นจะทำการเรียกหรือ trigger การทำงานให้เองแบบอัตโนมัติ
หรือเราเรียก Computed property ว่า getter method นั่นเอง

ถ้าข้อมูลที่เรากำลังดักจับการเปลี่ยนแปลง ไม่มีการเปลี่ยนแปลง
ค่าของมันก็จะไม่เปลี่ยนหรือใช้ค่าล่าสุดที่เปลี่ยนนะครับ

โดยที่ Computed property จะเป็น method ที่ไม่มี argument นะ
หรืออาจจะเรียกว่า Observable property ก็ได้
ซึ่งผมชอบ feature นี้ตั้งแต่ภาษา Swift แล้ว
ทำให้การดักจับการเปลี่ยนแปลงข้อมูลในระบบง่ายมาก ๆ

มาดูตัวอย่าง code กันดีกว่า

3. Watcher

เป็นอีกตัวที่อาจจะทำให้สับสน
โดยที่ watcher นั้นใช้งานหลังจากที่ข้อมูลเปลี่ยนแปลงเสร็จแล้ว
ซึ่งจะทำการเรียกใช้งาน method ที่ต้องการได้เลย
การทำงานใน watcher นั้นมักจะเป็นงานแบบ asynchronous หรือ งานที่ใช้ resource เยอะ ๆ

ยกตัวอย่างเช่น
หลังจากการเพิ่มข้อมูลคะแนนและแสดงผลค่าเฉลี่ยของคะแนนเสร็จแล้ว
ต้องทำการบันทึกข้อมูลไปยัง Server หรือ เรียก REST APIs

น่าจะพอทำให้เข้าใจที่สาม component ใน Vue.js มากขึ้นนะครับ
ขอให้สนุกกับการ coding ครับ

Reference Websites
https://alligator.io/vuejs/computed-properties/
https://www.pointofvue.net/2017/04/19/vue-js-when-to-use-methods-computed-properties-or-watchers/
https://stackoverflow.com/questions/44350862/method-vs-computed-in-vue

Tags:,