Computed Properties ใน Vue

เราสามารถกำหนด properties ที่จะถูกคำนวณแบบ reactive ขึ้นอยู่กับ properties อื่นๆ Properties ดังกล่าวเรียกว่า computed properties พวกมันอยู่ในออปชัน computed

มาดูตัวอย่างกัน สมมติว่าใน data มีการเก็บชื่อและนามสกุลของผู้ใช้:

javascriptdata() {
  return {
    name: 'john',
    surn: 'smit',
  }
}

มาสร้าง property full ที่จะเก็บชื่อเต็มพร้อมนามสกุลกัน:

javascriptcomputed: {
  full: function() {
    return this.name + ' ' + this.surn;
  }
}

มาแสดงเนื้อหาของ properties ของเราใน template กัน:

App.vue<template>
  <p>{{ name }}</p>
  <p>{{ surn }}</p>
  <p>{{ full }}</p>
</template>

Computed properties เปลี่ยนแปลงแบบ reactive นี่หมายความว่าหากเราเปลี่ยนชื่อหรือนามสกุล property full ของเราก็จะเปลี่ยนไปแบบ reactive ทันที และเราจะเห็นการเปลี่ยนแปลงบนหน้าจอทันที