YouTip

## Reactive Data Reactivity is the core concept of Vue3. In this chapter, you will understand what reactivity is, learn to use ref and reactive to manage data, and implement category filtering functionality. * * * ## What is Reactivity? Reactivity means: when data changes, the page updates automatically. Traditional JS approach: after modifying variables, you have to manually update the DOM. Vue3's reactivity system automatically tracks data changes and notifies the view to refresh—you only need to care about the data, not the DOM. ## Example After clicking the button, the number displayed on the page changes automatically—this is reactivity. You don't need to write any `document.querySelector` or `innerHTML` to update the page. * * * ## ref — Handling Primitive Types ref is the most commonly used reactive API in Vue3, suitable for wrapping primitive data types. Primitive types include: strings, numbers, booleans, null, undefined. ### Syntax ## Example > The most critical point to remember: use .value in JS code, but not in templates. This is the most common mistake for beginners. * * * ## reactive — Handling Objects and Arrays reactive is suitable for wrapping reference type data like objects or arrays. Unlike ref, reactive doesn't need `.value`, you can access properties directly. ## Example ### Two Limitations of reactive | Limitation | Description | Solution | | --- | --- | --- | | Can only wrap object types | Cannot pass strings, numbers, etc. | Use ref for primitive types | | Cannot replace the whole object | Cannot assign a new object to the whole | Use Object.assign() or use ref instead | ## Example import{ reactive, ref } from 'vue' // Error: cannot replace the whole reactive object const state = reactive({ count:0}) // state = { count: 1 } // This won't work, will lose reactivity // Correct approach 1: modify properties instead of replacing the whole state.count=1 // Correct approach 2: wrap object with ref (ref allows whole replacement) const stateRef = ref({ count:0}) stateRef.value={ count:1}// Works! Because ref's .value can be replaced * * * ## When to Use ref vs reactive | Scenario | Recommended | Example | | --- | --- | --- | | Single string/number/boolean | ref | const name = ref('Xiao Ming') | | Single array | ref | const list = ref([]) | | Single object | ref or reactive both work | const user = ref({}) | | Multiple unrelated states | Each with ref | One ref per line | | A group of strongly related states | reactive | e.g., form data, configuration set | The most common practice in actual development: use ref for everything, including objects and arrays. This keeps the code consistent, no need to switch mental models between ref and reactive. > Subsequent chapters of this tutorial will use ref to manage all states, and will specifically mark places where `.value` is needed. * * * ## computed — Computed Properties computed is "data calculated from existing data". It has two core features: caching—won't recalculate when dependencies haven't changed; auto-tracking—automatically updates when dependencies change. ## Example Whenever `activeCategory` changes