ทำไมเราถึงควรหันมาใช้ Vue.js ?
สวัสดีครับ วันนี้ผมมีบทความดี ๆ ที่อยากจะมานำเสนอให้กับเพื่อน ๆ ทุกคนได้อ่านกัน ผมได้ไปเจอมาและเห็นว่ามีความน่าสนใจดี กับเพื่อน ๆ ที่อยากรู้ว่า เอ๊ะ ! Vue. Js มันคืออะไร มันดีอย่างไร และ มันต่างจากตัวอื่น ๆ อย่างไร ผมจึงได้แปลมาให้เพื่อน ๆ ได้อ่านกันนะครับ โดยต้นฉบับจะอยู่ที่ link นี้เลย >>> Start using Vue.js <<<
ก่อนที่เราจะเริ่มกัน ผมขอบอกก่อนนะครับว่า ผมไม่ใช่นักแปลมืออาชีพ แค่มีความสนใจ และ และอยากจะแชร์บทความดี ๆ ให้เพื่อนได้อ่านกัน 555 หากผิดพลาดประการใด ขออภัยด้วยนะครับ :D
เมื่อไม่นานมานี้ ผมได้มีโอกาสเริ่มใช้ Vue.js และผมไม่คิดที่จะหันกลับไปใช้อันเก่าอีกเลย การใช้ข้อมูลให้แสดงผลรวดเร็ว เมื่อใช้ opponent แบบโต้ตอบทำให้การพัฒนาเว็บไซต์ทำได้ง่าย,รวดเร็ว เข้าใจได้ง่าย และ รักษาไว้ได้นาน
ลองพิจารณาจากตัวอย่างง่าย ๆ อันนี้ จะเห็นได้ว่า Vue นั้นได้ลดความซ้ำซ้อนของตัว code และลำดับความคิดของคุณได้ จากในตัวอย่าง เราจะแสดงรายการง่าย ๆ ซึ่งมันอาจจะเป็น blog posts, tweets, people เป็นต้น
ตัวอย่างทั่วไปในส่วนของ Jquery จะประมานนี้ :
HTML
JS
จากตัวอย่าง JQuery ง่าย ๆ อันนี้ มันดูไม่ง่ายเลยที่จะปรับเปลี่ยนหรือแก้ไขแล้วไม่ให้เจ๊ง จากสถานะนี้ได้มีการจัดการอย่างเรียบร้อยแล้วใน DOM และเมื่อเรานำไปรวมกับ styling และ display logic อื่น ๆ มันจะเกิดความยุ่งเหยิง ไม่สะอาดตา ดูแล้ว งงไปหมดเข้าใจในตัว code ได้ยาก
งั้นเรามาลองมาดูตัวอย่างเดียวกันนี้ โดยใช้ Vue เข้ามาจัดการ
HTML
JS
เป็นยังไงละ ดูสะอาดตา ดูง่ายขึ้นเยอะเลยใช่มั้ย
ใน template นี้ เมื่อเรา input element เข้าไปมันจะไปผูกอยู่กับตัวกรองคุณสมบัติใน data เมื่อไรก็ตามที่ data เปลี่ยนไป text ใน input box ก็จะเปลี่ยนตามแบบอัตโนมัติ (สุดยอด!!)
ถ้าเราลองทำอะไรก็ได้กับ array people มันจะทำการอัพเดตข้อมูลให้โดยอัตโนมัติ โดยใช้กลไกการ re-render สิ่งสำคัญที่ต้องรู้คือ จะมีเฉพาะแค่ data เท่านั้นที่เปลี่ยนไปในหน้าเพจ เมื่อมีการ re-render ถ้าคุณมี 100 elements ใน array และมีการ change 1 ครั้ง และ 1 DOM element เหล่านั้นจะต้องมีการ re-painted ซึ่งมันทำให้ตัวแอพฯ มีประสิทธิภาพมากขึ้น โดยเฉพาะอย่างยิ่งบนอุปกรณ์มือถือฃ
จากตัวอย่างข้างต้นนั้น เป็นเพียงแค่เศษเสี้ยวความสามารถของ Vue.js เพียงเท่านั้น !! ความยอดเยี่ยมของ Vue คือการที่มันสามารถใช้ได้แบบเดี่ยวๆ เป็นเครื่องมือง่าย ๆ ขนาดเล็กที่สามารถใช้จัดการ application ขนาดใหญ่ได้ และมันยังเป็นการเพิ่มประสิทธิภาพให้กับ JS application ตัวเลือกอื่น ๆ อย่าง React และ Angular นั้นจำเป็นต้องมีการติดตั้งและ code สำเร็จรูป ที่มากขึ้น ซึ่งมันดูเ็นเรื่องที่ยุ่งยากจนเกินไปสำหรับเครื่องมือง่ายๆ
หากคุณสนใจอยากจะศึกษาเรื่องของ Vue.js เพิ่มเติม ผมขอแนะนำชุดวีดีโอจาก Laracasts — Learning Vue 1.0: Step By Step.
ครั้งหน้า ถ้าหากคุณสนใจที่จะศึกษาเกี่ยวกับเรื่องของ JQuery ลองใช้ Vue.js ดู แล้วคุณจะไม่เสียใจเลย ที่คุณได้เสียสละเวลาอันน้อยนิดที่จะศึกษามัน !
