How does reactivity work in Vue 3 with the setup script?

How does reactivity work in Vue 3 with the setup script?

In Vue 3, reactivity is achieved using the Composition API, particularly with the ref and reactive functions. The setup function is where you define your reactive state.

Can you explain the difference between ref and reactive?

Sure! ref is used for primitive values and creates a reactive reference, while reactive is used for objects and arrays, making the entire object reactive.

How do I use watch with the setup script?

You can use the watch function to observe changes in reactive data. Inside the setup function, you can import watch and pass the reactive data and a callback function.

What are some common pitfalls when using reactivity in Vue 3?

Common pitfalls include not using ref or reactive correctly, mutating reactive objects directly, and forgetting to return reactive properties from the setup function.