การสร้าง Reactive State ด้วย Computed ฟังก์ชั่น

บทความใหม่ ปีนี้ โดย Ninenik Narkdee
computed computed state vuejs

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ computed computed state vuejs

ดูแล้ว 407 ครั้ง


เนื้อหาตอนที่แล้วเราได้รู้จักกับการสร้าง reactive state ด้วย reactive
ฟังก์ชั่น รวมถึงได้รู้จักข้อจำกัดและแนวทางการเลือกใช้งานระหว่างฟังก์ชั่น ref()
และฟังก์ชั่น reactive() เนื้อหานี้เรามาดูต่อเกี่ยวกับอีกรูปแบบของกรสร้างหรือ
กำหนดตัวแปรสำหรับ reactive state ด้วยฟังก์ชั่น computed() 
 
 

การใช้งาน computed() ฟังก์ชัน

โดยปกติเราสามารถใช้ expression สำหรับกำหนดรูปแบบการแสดงข้อมูลใน template
ได้อย่างสะดวกและง่ายอยู่แล้ว แต่กับรูปแบบการจัดการที่ซับซ้อน การกำหนด expression
ที่มีความซับซ้อนหรือยาวหรือมีเงื่อนไข logic ที่ค่อนข้าง ก็จะทำให้ template นั้นจะดูรก
และก็จัดการยากขึ้น
 
ดูรูปแบบการใช้งาน expression ที่เริ่มมีความซับซ้อนขึ้น
 
<script setup>
import { ref, reactive, computed } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
  <br>
  <p>Has published books:</p>
  <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
</template>
 

สังเกตส่วนนี้

 
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
 
ถ้าจำนวนหนังสือของผู้แต่งมีมากกว่า 2 ก็แสดงว่าผู้แต่งนี้มีหนังสือตีพิมพ์ ให้ค่าเป็น yes
จะเห็นว่าเราสามารถใช้ expression ในรูปแบบนี้เพื่อแสดงผลได้ แต่ถ้าจะดีกว่านี้ ถ้าเรา
ใช้เครื่องมือที่เป็นฟังก์ชั่น computed() สำหรับช่วยในการคำนวณและแสดงผลข้อมูลโดย
อัตโนมัติ โดยคำนวณค่าจากข้อมูลอื่น ๆ ใน Vue instance หรือ component โดยไม่
ต้องเปลี่ยนแปลงข้อมูลต้นฉบับโดยตรง และจะถูกอัปเดตโดยอัตโนมัติเมื่อข้อมูลต้นฉบับเปลี่ยนแปลง
แถมยังทำให้การเขียนโค้ดดูสะอาดตามากขึ้น โดยสามารถเขียนได้เป็นดังนี้
 
<script setup>
import { ref, reactive, computed } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})
// a computed ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
  <br>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>
 
publishedBooksMessage คือ computed property หรือ reactive state ที่
สร้างด้วยฟังก์ชั่น computed() ซึ่งจะได้ค่าผลลัพธ์ที่ได้จากคำนวณมาแสดงผลเหมือนๆ 
กับ state ทั่วไป และข้อดีสำคัญก็คือมันสามารถใช้ผลลัพธ์ที่เป็นค่าแคช โดยไม่ทำงานตลอด
เวลา ถ้าข้อมูล state ที่เกี่ยวข้องไม่มีการเปลี่ยนแปลง ซึ่งต่างจาก ถ้าเราใช้เป็นฟังก์ชั่น ใน
ลักษณะดังนี้
 

รูปแบบการใช้งานแบบฟังก์ชั่น 

 
<script setup>
import { ref, reactive, computed } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})
function publishedBooksMessage(){
  return author.books.length > 0 ? 'Yes' : 'No'
}
</script>
<template>
  <button @click="increment">
    {{ count }}
  </button>
  <br>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage() }}</span>
</template>
 
การใช้งานในรูปบบฟังก์ชั่นข้างต้น ทุกครั้งที่ template มีการเรนเดอร์หรือโหลดใหม่ก็จะทำงาน
ฟังก์ชั่นทุกครั้ง ซึ่งในกรณีที่มีรูปแบบการทำงานที่ซับซ้อนมากๆ ก็จะส่งผลเสียต่อประสิทธิภาพการ
ทำงานของโปรแกรมโดยรวม ในขณะที่ถ้าเราใช้งานด้วยฟังก์ชั่น computed() จะทำงานก็เมื่อ
state ที่เกี่ยวข้องมีการเปลี่ยนแปลงค่าเท่านั้น หากยังเป็นค่าเดิม ก็จะใช้ค่าแคชก่อนหน้ามาแสดง
แทน ทำให้สามารถทำงานได้เร็วขึ้น
 
อย่างไรก็ดีข้อความระวังและหลีกเลี่ยงสำหรับการใช้งานฟังก์ชั่น computed เพื่อกำหนดค่า state
ควรใช้งานสำหรับคำนวณและแสดงผลลัพธ์เท่านั้น ไม่ควรใช้สำหรับปรับเปลี่ยนค่า state อื่นภายใน
ฟังก์ชั่น หรือห้ามใช้สำหรับการทำงานในรูปแบบ async หรือมีเวลาที่ต้องรอเข้ามาเกี่ยวข้อง รวมถึง
ห้ามใช้สำหรับแก้ไข DOM ภายในฟังก์ชั่นหรือการคำนวณดังกล่าว




กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ



ทบทวนบทความที่แล้ว









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ