الخصائص المحسوبة

ما الخاصية المحسوبة؟

تعريف computed

import { ref, computed } from "vue"

const firstName = ref("Ada")
const lastName = ref("Lovelace")

const fullName = computed(() => {
  return firstName.value + " " + lastName.value
})

استخدام computed في القالب

<template>
  <p>{{ fullName }}</p>
</template>

<!-- fullName updates automatically when
     firstName or lastName change -->

computed مقارنةً بالأساليب

التخزين المؤقت عمليًا

const expensive = computed(() => {
  console.log("computing...")
  return heavyCalculation(data.value)
})

// Reading expensive twice in one render
// logs "computing..." only once

تُنفّذ الأساليب في كل مرة

// In template: {{ getTotal() }} {{ getTotal() }}
// Calls getTotal twice, recomputing both times

methods: {
  getTotal() {
    return this.price * this.qty
  }
}

computed في Options API

export default {
  data() {
    return { price: 10, qty: 3 }
  },
  computed: {
    total() {
      return this.price * this.qty
    }
  }
}

دوال getter المحسوبة

const doubled = computed(() => count.value * 2)

// You can read doubled.value
// but assigning to it would warn

دوال setter المحسوبة

const fullName = computed({
  get() {
    return first.value + " " + last.value
  },
  set(newValue) {
    const parts = newValue.split(" ")
    first.value = parts[0]
    last.value = parts[1]
  }
})

استخدام setter

fullName.value = "Grace Hopper"

// The setter splits and assigns:
// first.value -> "Grace"
// last.value  -> "Hopper"

متى تستخدمون computed؟

اختبار سريع

مراجعة: الخصائص المحسوبة