Vuejs

Esto es un resumen de la documentación oficial de Vue 3.

Guia de estilos de Vue

Computed properties

Las propiedades computadas son funciones que se ejecutan cada vez que una de las propiedades que dependen de ellas cambia.

<script setup lang="ts">
import { ref, computed } from "vue";

const count = ref(0);

const double = computed(() => count.value * 2);
</script>
<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ double }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

Para evitarlo, usaremos un spread operator

<script setup lang="ts">
import { ref, computed } from "vue";

const reversedItems = computed(() => [...items.value].reverse());
</script>
<template>
  <ul>
    <li v-for="item in reversedItems" :key="item.id">{{ item.text }}</li>
  </ul>
</template>