13Aug, 2020
Language blog :
Thai
Share blog : 
13 August, 2020
Thai

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

By

4 mins read
ความแตกต่างระหว่าง WATCHERS และ COMPUTED property ใน Vue.js

หลาย ๆ คนที่เคยเขียน Vue.js มาบ้างแล้วอาจจะคุ้นเคยกับการใช้งาน method ที่เป็น property ในการเขียน ส่วนของ business logic ใน component ของเรา วันนี้จะมานำเสนอ 2 property ใหม่ที่มีการใช้งานคล้ายกับ method มาดูกันเลยว่าแต่ละตัวมีวิธีการใช้งานอย่างไร และข้อแตกต่างระหว่าง watch และ computed คืออะไร เพื่อที่เราจะสามารถเลือกใช้ได้ถูกต้อง

Computed property

ตัว computed นั้นมีประโยชน์มากในการ manipulate กับข้อมูลของเราที่มีอยู่แล้วเพื่อต้องการผลลัพธ์จากข้อมูลนั้นและ computed จะทำงานก็ต่อเมื่อข้อมูลที่สนใจมีการเปลี่ยนแปลง

ลองมาดูตัวอย่างเบื้องต้นเพื่อให้เข้าใจการทำงานกัน

Computed property JS

JS

Computed property HTML

HTML

จากตัวอย่างจะแสดงผลลัพธ์เริ่มต้นเป็นข้อความ ‘Less than 3’ และเมื่อเราทำการ click ที่ปุ่ม Increase จะเพิ่มค่า counter ทีละ 1 เมื่อ counter มีค่ามากกว่า 3 จะทำการแสดงข้อความว่า ‘Greater than 3’

Watchers

ตัว watchers จะมีการ listen กับ data ที่เราสนใจและสามารถให้ทำการคำนวณบางอย่างกับค่าของ watchers  ลองดูตัวอย่างการทำงาน

Watchers JS

JS

Watchers HTML

HTML

จากตัวอย่าง เมื่อทำการ click ที่ปุ่ม increase ค่า counter จะเพิ่มขึ้นทีละ 1 และตัว watchers ที่เราสั่งให้ทำการ watch ตัว counter จะทำงานโดยรันคำสั่ง setTimeout ซึ่งเป็น callback funtion ที่มีการทำงานแบบ asynchonous โดยหลังจาก 2 วินาทีจะทำการ set ค่าให้ counter เป็น 0 ซึ่งการใช้ computed จะไม่สามารถทำการรันคำสั่งที่เป็น asynchonous ได้

แล้วเราจะใช้ watchers หรือ computed เมื่อไหร่? ก็พอจะสรุปได้ดังนี้

Watchers

  • ต้องการที่จะ listen กับ data property ที่สนใจเมื่อมีการเปลี่ยนแปลงต้องการที่จะดำเนินการอะไรบางอย่าง
  • ต้องการที่จะ watch ค่า data property ที่สนใจเมื่อค่ามีการเปลี่ยนไปตามเงื่อนไขที่กำหนดแล้วดำเนินการบางอย่าง
  • การใช้กับการทำงานแบบ asynchonous

Computed

  • ต้องการที่จะนำ data property ที่มีมา manipulate เพื่อจะได้ค่าที่ต้องการ
  • ต้องการจัดการกับข้อมูลที่มีโครงสร้างขนาดใหญ่ก่อนการนำไปใช้งาน
  • ต้องการนำค่าไปใช้งานโดยตรงภายใน template

ติดตามอ่านบทความดี ๆ ที่น่าสนใจ ไม่ว่าจะเป็น Machine Learning, Startup, Design, Software Development และ Management ทาง Senna Labs Blog ได้ทุกวัน

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

02
March, 2024
JS class syntax
2 March, 2024
JS class syntax
เชื่อว่าหลายๆคนที่เขียน javascript กันมา คงต้องเคยสงสัยกันบ้าง ว่า class ที่อยู่ใน js เนี่ย มันคืออะไร แล้วมันมีหน้าที่ต่างกับการประกาศ function อย่างไร? เรามารู้จักกับ class ให้มากขึ้นกันดีกว่า class เปรียบเสมือนกับ blueprint หรือแบบพิมพ์เขียว ที่สามารถนำไปสร้างเป็นสิ่งของ( object ) ตาม blueprint หรือแบบพิมพ์เขียว( class ) นั้นๆได้ โดยภายใน class

By

4 mins read
Thai
02
March, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
2 March, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
ผู้ให้บริการเครือข่ายในสหรัฐฯ ได้เปิดตัว 5G ในหลายรูปแบบ และเช่นเดียวกับผู้ให้บริการเครือข่ายในยุโรปหลายราย แต่… 5G มันคืออะไร และทำไมเราต้องให้ความสนใจ บทความนี้ได้รวบรวม 15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G เพราะเราปฏิเสธไม่ได้เลยว่ามันกำลังจะถูกใช้งานอย่างกว้างขวางขึ้น 1. 5G หรือ Fifth-Generation คือยุคใหม่ของเทคโนโลยีเครือข่ายไร้สายที่จะมาแทนที่ระบบ 4G ที่เราใช้อยู่ในปัจจุบัน ซึ่งมันไม่ได้ถูกจำกัดแค่มือถือเท่านั้น แต่รวมถึงอุปกรณ์ทุกชนิดที่เชื่อมต่ออินเตอร์เน็ตได้ 2. 5G คือการพัฒนา 3 ส่วนที่สำคัญที่จะนำมาสู่การเชื่อมต่ออุปกรณ์ไร้สายต่างๆ ขยายช่องสัญญาณขนาดใหญ่ขึ้นเพื่อเพิ่มความเร็วในการเชื่อมต่อ การตอบสนองที่รวดเร็วขึ้นในระยะเวลาที่น้อยลง ความสามารถในการเชื่อมต่ออุปกรณ์มากกว่า 1 ในเวลาเดียวกัน 3. สัญญาณ 5G นั้นแตกต่างจากระบบ

By

4 mins read
Thai
02
March, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
2 March, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
ในปัจจุบันนี้ ปฏิเสธไม่ได้เลยว่าภาษาที่ถูกใช้ในการเขียนเว็บต่าง ๆ นั้น คงหนีไม่พ้นภาษา Javascript ซึ่งเป็นภาษาที่ถูกนำไปพัฒนาเป็น framework หรือ library ต่าง ๆ มากมาย ผู้พัฒนาหลายคนก็มีรูปแบบการเขียนภาษา Javascript ที่แตกต่างกัน เราเลยมีแนวทางการเขียนที่หลากหลาย มาแบ่งปันเพื่อน ๆ เกี่ยวกับการจัดการ Array ด้วยภาษา Javascript กัน เรามาดูตัวอย่างกันเลยดีกว่า โดยปกติแล้วการ copy ค่าจาก value type ธรรมดา สามารถเขียนได้ดังนี้

By

4 mins read
Thai

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.