Reactivity with ref() and reactive()

« Vue.js 3 Introduction & SFCs« Previous Directives: v-bind, v-model, v-if & v-for »Next »

Understand Vue 3 reactivity proxies: wrapping primitives with ref() vs objects with reactive().

ref() vs. reactive()

ref(value): Wraps any value (primitives like numbers, strings, or booleans). In JavaScript, you read/write via .value, while in templates it automatically unwraps.

reactive(object): Creates a deep reactive proxy of an object or array.

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

How do you access the value of a ref() variable inside JavaScript code?

« Previous: Vue.js 3 Introduction & SFCs Next: Directives: v-bind, v-model, v-if & v-for »