No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

1D
19H
23M
13S

Variables reactivas con ref y reactive

14/23
Recursos

Aportes 10

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

La reactividad de VueJS es posible gracias al objeto Proxy en JavaScript.

Proxy nos permite crear una referencia a otro objeto, que se comportar谩 igual que si se tratara del objeto original, pero agregando la capacidad de escuchar cada vez que un valor del objeto cambia para ejecutar alg煤n c贸digo.

De hecho, cada cambio que hacemos sobre un objeto Proxy, en realidad se aplica al objeto original, a煤n as铆, para JS se sigue tratando de dos objetos distintos, por lo que si aplicamos un cambio al objeto original, el objeto Proxy no se enterar谩, es decir, el valor si se ver谩 reflejado al accederlo, pero los handlers que escuchan esos cambios no se activar谩n.

// Ejemplo de proxy
// Se define el objeto original
const obj = {
  counter: 0
};

/*
 Se definen los handlers,
 que escuchar谩n todo lo que suceda con el objeto original.
*/
const handlers = {
  /* 
    Este handler escucha cada vez que
    asignamos un nuevo valor a un atributo del objeto original.
  */
  set(obj, prop, val) {
    /*
      obj: refiere al objeto original
      prop: es el atributo del objeto, por ejemplo: counter
    */
     console.log(`update: ${prop}`);
  }
}

// Creamos un proxy de obj
const proxy = new Proxy(obj, handlers);

// Ejecutamos lo siguiente en la consola
obj.counter 
output: 0

proxy.counter
output: 0

// el handler no se ejecuta
obj.counter++

obj.counter
output: 1

proxy.counter
output: 1

// el handler si se ejecuta
proxy.counter++
output: update counter

obj.counter
output: 2

proxy.counter
output: 2

Es gracias al objeto Proxy, que VueJS puede saber que un valor ha cambiado y as铆 propagar ese cambio a todos los lugares d贸nde se use ese valor, esto es a lo que conocemos c贸mo reactividad.

Sin embargo, el objeto Proxy tiene ciertas reglas para funcionar, la principal es que necesita envolver a un objeto, no puede funcionar sobre variables que solo tengan valores de tipo primitivo (n煤meros, cadenas de texto, booleanos, etc).

Es por eso que cu谩ndo se trata de valores de tipo primitivo, c贸mo es el caso de la funci贸n ref, siempre tenemos que usar el atributo value para acceder al valor y as铆 mantener la reactividad, pues por detr谩s estar谩 creando un objeto con la propiedad value, a la cu谩l le asignar谩 el valor que ref recibe por argumento.

// Podemos imaginar el c贸digo de ref m谩s o menos as铆
function ref(value) {
  return new Proxy({ value }, {
    set(obj, prop, val) {
  	/* Aqu铆 vue escucha cu谩ndo asignamos un nuevo valor */
    }
  });
}

// Uso
const counter = ref(0);
counter.value = 10;
console.log(counter.value); // output 10

Mientras tanto cu谩ndo usamos reactive, el valor que pasamos por argumento ya es un objeto, as铆 que VueJS puede aplicarle todo su sistema de reactividad sin necesidad de hacer nada m谩s.

// Podemos imaginar el c贸digo de reactive m谩s o menos as铆
function ref(value) {
  return new Proxy(value, {
    set(obj, prop, val) {
  	/* Aqu铆 vue escucha cu谩ndo asignamos un nuevo valor */
    }
  });
}

// Uso
const obj = reactive({ counter: 0 });
obj.counter = 10;
console.log(obj.counter); // output 10

Es por esto que en variables creadas con ref necesitamos usar el atributo value, pero en variables creadas con reactive, no es necesario.

Esto tambi茅n significa que debemos tener cuidado al usar cosas c贸mo el spread operator (鈥), ya que estar铆amos extrayendo el valor del objeto Proxy, y por lo tanto obtenemos el valor, m谩s no la referencia, y podemos perder la reactividad.

Este post de StackOverflow explica las diferencias entre Ref y Reactive: Ref vs Reactive

En resumen: Reactive SOLAMENTE funciona con objetos {}.
ref funciona con dem谩s tipos de datos 馃槂

Tambi茅n podemos usar objetos con la funci贸n ref, incluso arrays. Pero, para algunos casos, es mejor emplear reactive.

Una de las diferencias entre utilizar ref y reactive es que si asignamos un objeto a ref, podemos sobrescribir el objeto entero asignando un nuevo objeto a su value, mientras que con un objeto creado con reactive no se podr铆a.

const objState = ref({
  isVisible: true,
  name: 'Angel',
});

// reemplazando el objeto completo
objState.value = {
  isVisible: false,
  name: 'Fernando',
};

Como mi novia se molesta un poco porque despu茅s de trabajar vengo a programar, encontr茅 una estrategia para que esto no se convierta en un problema鈥

<template>
    <div>
        <h1>Hola mundo</h1>
        <p>{{text}}</p>
    </div>
</template>


<script>
import { onMounted } from "vue"
import { ref } from "vue";
export default {
    setup() {
        const mensajes = ref(["Te amo mi amor", "Eres el amor de mi vida", "Pamela chu","Colochita mia","Me encanta tu carita mi amor","Te amo mucho","Siempre pienso en ti"])
        const text = ref("Hola vue")
       
        setInterval(() => {
             var x = Math.floor(Math.random() * (mensajes.value.length ));
            text.value = mensajes.value[x]
            
        },1000)
        onMounted(() => {
            console.log("mounted")
            text.value = "New valor, hola vue"
        });

        return {
            text,
        }
    }
}
</script>```

Un dato a tener en cuenta al usar Reactive.

Cuando creamos una variable reactiva usando Reactive y un objeto, CADA ATRIBUTO de dicho objeto se comporta como una variable reactiva, no solo el objeto en cuestion. Es decir si tenemos

const obj = reactive({ name: "Francisco", age: 21})

Es lo mismo que:

const obj = reactive( {name: ref("Francisco"), age: ref(21)} )

En cambio, si pasamos a un ref un objeto, solo la referencia al objeto es reactiva, mientras que sus propiedades no lo son.

ref()

  • para tipos de datos primitivos y objetos, pero para este 煤ltimo necesita .value para acceder al valor.

reactive()

  • Para arrays y objetos, donde se puede acceder directamente al valor SIN .value

Ejemplo

const personRef = ref({name: 'John'});
const personReactive = reactive({name: 'John'});

personRef.value.name; //John
personReactive.name; //John

No entiendo cual es la ventaja o la diferencia de no utilizarla

Tambien con 鈥渞ef鈥 se puede usar objetos as铆.

<template>
    <h3>Bienvenidos a vue 3 Composition API</h3>
    <p>{{msg}}</p>
    <p>{{counter.counter}}</p>
</template>
<script>
import { ref } from 'vue';
export default{

    setup(props, ctx){
        console.log(props, ctx)
        const msg = ref("Hello Vue");
        const obj = ref({counter: 0})

        setInterval(()=>{
            obj.value.counter++;
        }, 1000)
        return {
            msg,
            counter: obj.value
        }
    }
}
</script>

Una diferencia entre ref y **reactive ** es que la primera se puede emplear para tipos de datos primitivos y referenciados, el reactive solo para referenciados (arrays, objetos), y adem{as en el reactive no necesita el .value para acceder al valor.

ref vs reactive

Ref es usado para trabajar con variables primitivas y tambien es posible trabajar con objetos.
.
Reactive es usado para trabajar con objetos y no con primitivos.