1. Computed Properties คืออะไร?

Computed Properties ใน Vue.js คือฟังก์ชันที่ช่วยคำนวณค่าจากข้อมูลใน data หรือค่าที่เปลี่ยนแปลงแบบไดนามิก โดยผลลัพธ์ของ Computed Properties จะถูกแคช (Cache) และจะคำนวณใหม่เฉพาะเมื่อค่าที่เกี่ยวข้องเปลี่ยนแปลง

---

2. ความแตกต่างระหว่าง Computed Properties และ Methods

ลักษณะ	Computed Properties	Methods
การแคชผลลัพธ์	แคชผลลัพธ์ และจะคำนวณใหม่เฉพาะเมื่อข้อมูลที่เกี่ยวข้องเปลี่ยนแปลง	ไม่แคช และคำนวณใหม่ทุกครั้งที่เรียกใช้
การใช้งาน	เหมาะสำหรับการคำนวณค่าที่ขึ้นอยู่กับ Data หลายค่า	เหมาะสำหรับการประมวลผลที่ต้องการเรียกซ้ำหลายครั้ง

---

3. การใช้งาน Computed Properties

ตัวอย่างพื้นฐาน:

<template>
  <div>
    <h1>Full Name</h1>
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};
</script>

ผลลัพธ์:

Full Name: John Doe

คำอธิบาย:

• fullName เป็น Computed Property ที่คำนวณค่าจาก firstName และ lastName
• ผลลัพธ์จะถูกแคชจนกว่า firstName หรือ lastName จะเปลี่ยนแปลง

---

4. การใช้งาน Computed Properties กับเงื่อนไข

ตัวอย่าง:

<template>
  <div>
    <h1>Status</h1>
    <p>{{ statusMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: true
    };
  },
  computed: {
    statusMessage() {
      return this.isLoggedIn ? 'Welcome back!' : 'Please log in.';
    }
  }
};
</script>

ผลลัพธ์:

• ถ้า isLoggedIn เป็น true จะแสดง "Welcome back!"
• ถ้า isLoggedIn เป็น false จะแสดง "Please log in."

---

5. การใช้งาน Computed Properties กับฟอร์แมตข้อมูล

ตัวอย่าง:

<template>
  <div>
    <h1>Price with Tax</h1>
    <p>Original Price: {{ price }}</p>
    <p>Price with Tax: {{ priceWithTax }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      taxRate: 0.07
    };
  },
  computed: {
    priceWithTax() {
      return (this.price * (1 + this.taxRate)).toFixed(2);
    }
  }
};
</script>

ผลลัพธ์:

Original Price: 100
Price with Tax: 107.00

คำอธิบาย:

• priceWithTax คำนวณราคาพร้อมภาษีจาก price และ taxRate
• ผลลัพธ์ถูกจัดรูปแบบด้วยทศนิยม 2 ตำแหน่ง

---

6. การใช้งาน Computed Properties แบบ Getters และ Setters

ตัวอย่าง:

<template>
  <div>
    <h1>Full Name</h1>
    <input v-model="fullName" />
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      set(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[1] || '';
      }
    }
  }
};
</script>

ผลลัพธ์:

• คุณสามารถแก้ไข fullName และค่าของ firstName และ lastName จะอัปเดตอัตโนมัติ

---

7. สรุป

ในบทนี้ คุณได้เรียนรู้:

• ความหมายและการใช้งาน Computed Properties
• ความแตกต่างระหว่าง Computed Properties และ Methods
• การใช้งาน Computed Properties กับเงื่อนไข, การฟอร์แมตข้อมูล, และการใช้ Getters/Setters

ในบทถัดไป เราจะศึกษาการใช้งาน Watchers ใน Vue.js เพื่อเฝ้าดูการเปลี่ยนแปลงของข้อมูล!