Vue.js เริ่มต้น ตอน6 (Computed Properties and Watchers)

ก่อนหน้านี้เราได้เรียนรู้กันไปแล้วว่าใน Template จะจัดการเกี่ยวกับการแสดงผล ซึ่งในบางครั้งเราจําเป็นต้องนํา Logic บางอย่างใส่เข้าไปใน Template ด้วย ซึ่งเราก็จะใส่ไปแบบนี้

แบบนี้ก็ไม่ผิดครับ แต่จะยากลําบากเมื่อเรา Maintain ระบบ

Vue.js ก็แก้ปัญหาโดยแยกมันออกมาซะ โดยเรียกมันว่า Computed แบบนี้ครับ

จะได้แบบนี้ครับ

ข้อมูลของ reversedMessage จะขึ้นอยู่กับ message เมื่อ message เปลี่ยน จะรัน reversedMessage ใหม่

Computed vs Methods

โดยปกติแล้วเราสามารถใช้ Method ได้เหมือนกัน แบบนี้

ซึ่งจะได้ผลลัพธ์เหมือนกัน

แต่มีมีสิ่งที่แตกต่างกันคือ Method จะเรียก Function ทุกครั้งที่ Component re-render ใหม่ ซึ่งต่างจาก Computed จะไม่เรียก Function เมื่อ ข้อมูลไม่เปลี่ยน

ตัวอย่าง

ทุกครั้งที่กดปุ่ม Date from Method จะเปลี่ยนแปลง แต่ Date from Computed จะไม่เปลี่ยนแปลง เพราะว่า เมื่อ now เปลี่ยน ทําให้ Component ทําการ Render ใหม่ ส่งผลให้ Method reverseMessageInMethod() ถูกเรียกให้ทํางานอีกครั้ง แต่ Computed จะไม่ทํางานเนื่องจาก ข้อมูลใน function ไม่มีการเปลี่ยนแปลง ก็จะใช้ค่าเดิมก่อนหน้านี้

Computed vs Watched Property

Vue มีทางเลือกหลายทางที่จะเฝ้าดูการเปลี่ยนแปลงของข้อมูล และ Watched Property ก็เป็นอีกทางเลือกนึง

การทํางานของ Watched Property  คือ เฝ้าดูว่าข้อมูลในตัวแปลที่เรากําหนดมีการเปลี่ยนแปลงหรือไม่ ถ้ามีการเปลี่ยนแปลงก็จะรันคําสั่งที่เราเขียนไว้ จะมีประโยชน์ในกรณีที่ เมื่อเราต้องการให้ ข้อมูล A เปลี่ยน แล้ว ข้อมูล B จะต้องเปลี่ยนด้วย ตัวอย่าง

ซึ่งจะให้ผลลัพธ์เหมือนกันกับ Compute ตามตัวอย่างนี้

ก็ลองเลือกใช้งานกันดูนะครับ

นอกจากนี้เรายังสามารถนําค่าก่อนที่จะเปลี่ยนแปลงมาใช้งานใน Funtion ได้อีกด้วย

Computed Setter

โดย Default Computed จะเป็น Read only หรือ Getter ได้อย่างเดียว แต่เราสามารถ จะเพิ่ม Setter ได้ด้วย ตามตัวอย่างนี้ครับ

เมื่อเรารันคําสั่ง this.fullName = 'John Doe' Setter ก็จะทํางานครับ

จบ!!! โปรดคิดตามตอนต่อไป...

Comments