De acuerdo con los documentos, las primitivas no deberían volverse reactivas cuando se usa un envoltorio reactive , es por eso que en este caso deberíamos ir con ref . La misma situación es cuando queremos reasignar todo el objeto en lugar de mutarlo.
Mi pregunta es ¿por qué en los siguientes fragmentos counter2 y state2.counter comienzan a funcionar correctamente cuando descomentamos las líneas comentadas?
<script setup> import { ref, reactive } from 'vue'; let counter1 = ref(0); let counter2 = reactive(0); const increment = () => { // counter1.value++; counter2++; } </script> <template> <h3>counter1 {{ counter1 }}</h3> <h3>counter2 {{ counter2 }}</h3> <button @click="increment">increment</button> </template>Patio de recreo: enlace
<script setup> import { ref, reactive } from 'vue'; let state1 = ref({ counter: 0 }); let state2 = reactive({ counter: 0 }); const increment = () => { // state1.value = { counter: state1.value.counter + 1 }; state2 = { counter: state2.counter + 1 }; } </script> <template> <h3>counter1 {{ state1.counter }}</h3> <h3>counter2 {{ state2.counter }}</h3> <button @click="increment">increment</button> </template>Patio de recreo: enlace
Vue detecta la mutación en counter1 y vuelve a renderizar el componente completo que incluye el valor counter2 actualizado. Está viendo el valor counter2 actualizado debido a la nueva representación causada por el cambio en counter1 . counter2 por sí solo no activará un renderizado porque no es reactivo.
Debe seguir con ref para tener un tipo reactivo e incluso especificarlo, ya que no tiene sentido hacer un objeto solo para el contador. Puede usar const counter = ref<int>(0) mientras trabaja con el valor dentro, no tiene que usar let y al acceder en el script solo use counter.value y en su HTML {{ counter }} . Con ref, crea un valor primitivo reactivo, mientras que el uso de reactivo se usa para crear objetos reactivos y es como un reemplazo de los datos. Así que solo use ref, ya que se puede usar para casi todo, incluso puede crear sus propios tipos y especificarlos. Además, cuando se trabaja con reactivo, no se puede intercambiar el objeto completo y no se puede usar para todo, por otro lado, la referencia solo puede tener un inconveniente. El valor puede ser molesto, pero al final, vale la pena.