ความแตกต่างระหว่าง Method และ Computed property ใน Vue.js

เช้านี้อ่านเจอการพูดคุยเรื่องของความแตกต่างระหว่าง 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