Understanding Vue3's Ref and Reactive for State Management
Tech
1
Vue3 introduces two fundamental reactivity APIs: ref and reactive. These tools enable developers to create responsive data structures efficiently.
1. Core Concepts
1.1 Ref API
ref creates a reactive reference to a primitive value:
import { ref } from 'vue';
const counter = ref(0);
console.log(counter.value); // Access value
counter.value++; // Modify value
1.2 Reactive API
reactive makes entire objects responsive:
import { reactive } from 'vue';
const user = reactive({
name: 'John',
age: 25
});
console.log(user.name); // Access property
user.age++; // Modify property
2. Practical Implementations
2.1 Using Ref with Side Effects
import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {
console.log(`Current count: ${count.value}`);
});
2.2 Reactive Object Monitoring
import { reactive, watchEffect } from 'vue';
const profile = reactive({
username: 'dev123',
loggedIn: false
});
watchEffect(() => {
console.log(`User status: ${profile.loggedIn ? 'Online' : 'Offline'}`);
});
3. Advanced Patterns
3.1 Ref in Component Lifecycle
import { ref, onMounted } from 'vue';
const timer = ref(null);
const seconds = ref(0);
onMounted(() => {
timer.value = setInterval(() => {
seconds.value++;
}, 1000);
});
3.2 Nested Reactive Structures
import { reactive } from 'vue';
const store = reactive({
user: {
preferences: {
theme: 'dark'
}
},
settings: {
notifications: true
}
});
console.log(store.user.preferences.theme);
