Reactivity of primitives using reactive in Vue 3-CodePudding

According to the docs, primitives shouldn't become reactive when using reactive wrapper, that's why in this case we should go with ref. The same situation is when we want to reassign the entire object instead of mutating it.

My question is why in the following snippets counter2 and state2.counter start working correctly when we uncomment the commented lines?

<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>

Playground: link

<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>

Playground: link

CodePudding user response：

You should stick with ref to have a reactive type and even specify it as it is pointless to make an object just for the counter. You can use const counter = ref<int>(0) as you work with value inside you don't have to use let and when accessing in the script just use counter.value and in you HTML {{ counter }}. With ref you create a reactive primitive value meanwhile by using reactive is used for creating reactive objects and it's as a replacement for data. So just use ref as it can be used for almost everything you can even create your own types and specify them. Also when working with reactive you can't swap the complete object and it can't be used for everything on the other hand ref can only downside is .value which can be annoying but in the end, it's worth it.

CodePudding user response：

Vue detects the mutation to counter1 and re-renders the entire component which includes the updated counter2 value. You're seeing the updated counter2 value due to the re-render caused by the change to counter1. Mutating counter2 alone will not trigger a render because it isn't reactive.