Zet - What’s the difference between ref and reactive in vue?

What’s the difference between ref and reactive in vue?

Using reactive you can access the properties directly, unlike ref where you have to get the properties on value eg.

setup() {
const refState = ref({ name: 'kev', age: 40 })
const reactiveState = reactive({ name: 'kev', age: 40 })

const updateRefState = () => {
	refState.value.age = 30
}

const updateReactiveState = () => {
	reactiveState.age = 30
}
}

Nb the caveat is reactive does not work with primitives. eg.

const reactiveState = reactive('Kev')

#vue, #reactive