Computed

Propiedades computadas en objetos, con reactive():

const persona = reactive({
  nombre: "Felipe",
  apellido: "Perez",
  edad: 20,
  nombreCompleto: computed(() => {
    return `${persona.nombre} ${persona.apellido}`;
  }),
 });

Codigo de esta clase

<template>
  <div>{{ fullname }}</div>
</template>

<script>
import { ref, computed } from "vue";

export default {
  setup() {
    const firstName = ref("Dufainder");
    const lastName = ref("Bedoya");

    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

    return {
      fullName,
    };
  },
};
</script>

Otra forma de hacerlo, me parece que el código queda un poco más limpio, ¿qué opinan?

<template>
  <h2>{{ fullName }}</h2>
</template>

<script>
import { ref, computed } from "vue"

export default {
  setup() {
    const firstName = ref("John")
    const lastName = ref("Doe")

    return {
      fullName: computed(() => `${firstName.value} ${lastName.value}`)
    }
  }
}
</script>

Mi reto con computed haciendo que reciba un valor por parámetro:

<template>
  <div>
    <button @click="estado = !estado">Cambiar valor</button>
  </div>
  <div><button @click="miobj.count++">Aumentar valor</button></div>
  <div><button @click="proximo = 0">Resetear</button></div>
  <div v-show="estado">¡Apareci!</div>
  <div>{{ miobj.count }}</div>
  <div>Siguiente valor: {{ proximo }}</div>
</template>

<script setup>
import { ref, reactive, watch, computed } from "vue";

const estado = ref(true);
const miobj = reactive({ count: 0 });

// const proximo = computed(() => miobj.count + 1);

const proximo = computed({
  get: () => miobj.count + 1,
  set: (valor) => {
    miobj.count = valor;
  },
});

watch(proximo, (newValue, oldValue) => {
  console.log("Anterior", oldValue);
  console.log("Nuevo", newValue);
  if (miobj.count > 10) {
    proximo.value = 0;
  }
});
</script>

Entonces con la funcion setup(){} hacemos todo lo que haciamos con options API pero de una forma digamos “manual” pero más sencillo. Solo es acostumbrarse a ya no declarar las variables en data sino usar ref o reactive