Vue.js

Appearance

On this page

Fundamentos de Reactividad ​

Preferencias de API

Esta página y muchos otros capítulos posteriores en la guía tienen contenido diferente para la Options API y la Composition API. Tu preferencia actual es Options APIComposition API. Puedes alternar entre los estilos de API usando el interruptor de "Preferencia de API" en la parte superior de la barra lateral izquierda.

Declarando el Estado Reactivo ​

Con la Options API, usamos la opción data para declarar el estado reactivo de un componente. El valor de la opción debe ser una función que retorne un objeto. Vue llamará a la función al crear una nueva instancia del componente y empaquetará el objeto devuelto en su sistema de reactividad. Cualquier propiedad de nivel superior de este objeto se representa en la instancia del componente (this en los métodos y hooks del ciclo de vida):

js
export default {
  data() {
    return {
      count: 1
    }
  },

  // `mounted` es un hook del ciclo de vida que explicaremos luego
  mounted() {
    // `this` se refiere a la instancia del componente.
    console.log(this.count) // => 1

    // los datos también pueden ser mutados
    this.count = 2
  }
}

Pruébalo en la Zona de Práctica

Estas propiedades de la instancia solo se agregan cuando la instancia se crea por primera vez, por lo que debes asegurarte de que estén todas presentes en el objeto retornado por la función data. Cuando sea necesario, usa null, undefined o algún otro valor indicador para las propiedades donde el valor deseado aún no está disponible.

Es posible agregar una nueva propiedad directamente al this sin incluirla en data. Sin embargo, las propiedades agregadas de esta manera no serán capaces de desencadenar actualizaciones reactivas.

Vue usa el prefijo $ cuando expone sus propias APIs integradas a través de la instancia del componente. También reserva el prefijo _ para propiedades internas. Debes evitar el uso de nombres para las propiedades de nivel superior de data que comiencen con cualquiera de estos caracteres.

Proxy Reactivo vs. Original ​

En Vue 3, los datos se vuelven reactivos al aprovechar los Proxies de JavaScript. Los usuarios que vienen de Vue 2 deben tener en cuenta el siguiente caso extremo:

js
export default {
  data() {
    return {
      someObject: {}
    }
  },
  mounted() {
    const newObject = {}
    this.someObject = newObject

    console.log(newObject === this.someObject) // false
  }
}

Cuando accedes a this.someObject después de asignarlo, el valor es un proxy reactivo del newObject original. A diferencia de Vue 2, el newObject original se deja intacto y no se volverá reactivo: asegúrate de acceder siempre al estado reactivo como una propiedad de this.

Declarando el Estado Reactivo ​

ref() ​

En la Composition API, la manera recomendada de declarar el estado reactivo es utilizando la función ref():

js
import { ref } from 'vue'

const count = ref(0)

ref() toma el argumento y lo retorna envuelto en un objeto ref con una propiedad .value:

js
const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

Mira también: Escribir Refs

Para acceder a las refs en la template de un componente, las declaramos y retornamos desde una función setup() del componente:

js
import { ref } from 'vue'

export default {
  // `setup` es un hook especial dedicado para la Composition API.
  setup() {
    const count = ref(0)

    // expone la ref a la template
    return {
      count
    }
  }
}
template
<div>{{ count }}</div>

Observa que no necesitamos agregar .value cuando usamos la ref en la template. Por conveniencia, las refs son automáticamente desempaquetadas cuando son usadas dentro de las templates (con unas pocas advertencias).

También puedes mutar una ref directamente en los manejadores de eventos:

template
<button @click="count++">
  {{ count }}
</button>

Para lógica más compleja, podemos declarar funciones que muten las refs en el mismo ámbito y las expongan como métodos al lado del estado:

js
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      // .value es necesario en JavaScript
      count.value++
    }

    // no olvides exponer también la función.
    return {
      count,
      increment
    }
  }
}

Los métodos expuestos pueden ser usados entonces como manejadores de eventos:

template
<button @click="increment">
  {{ count }}
</button>

Aquí está el ejemplo interactivo en Codepen, sin usar ninguna herramienta de construcción.

<script setup>