SoFunction
Updated on 2025-04-13

The difference between ref and reactive in Vue3 and description

The difference between Vue3 ref and reactive

In Vue 3,refandreactiveAll are methods used to create responsive data

But they have the following main differences:

1. Different usage scenarios

ref：

  • Mainly used for basic data types (String, Number, Boolean, etc.)
  • Can also be used for objects/arrays, but need to be passed.valueaccess
  • Suitable for single responsive data management
import { ref } from 'vue'

// Basic Typeconst count = ref(0)
() // 0

// Object typeconst user = ref({
  name: 'Tom',
  age: 18
})
() // 'Tom'

reactive：

  • Mainly used for object types (Object, Array)
  • Direct access to properties, no need.value
  • Suitable for management of multiple responsive data
import { reactive } from 'vue'

const state = reactive({
  name: 'Tom',
  age: 18,
  hobbies: ['reading', 'swimming']
})
() // 'Tom'

2. Different access methods

ref：

  • Need to pass in the setup.valueaccess
  • Automatically unpack in templates, use directly
<script setup>
import { ref } from 'vue'

const count = ref(0)
// .value is required in setupconst increment = () => {
  ++
}
</script>

<template>
  <!-- Use directly in the template，unnecessary .value -->
  <div>{{ count }}</div>
</template>

reactive：

  • Direct access to properties, no need.value
  • Access in the same way as the template and setup
<script setup>
import { reactive } from 'vue'

const state = reactive({
  count: 0
})
// Direct accessconst increment = () => {
  ++
}
</script>

<template>
  <!-- Direct access -->
  <div>{{  }}</div>
</template>

3. Different deconstruction behaviors

ref：

  • Supports deconstruction, and remains responsive after deconstruction
  • AvailabletoRefsConvert the properties of the reactive object to ref
import { ref, toRefs } from 'vue'

const user = reactive({
  name: ref('Tom'),
  age: ref(18)
})

// Ref remains responsive after deconstructionconst { name, age } = toRefs(user)
 = 'Jerry' // Still responsive

reactive：

  • Deconstruction will lose responsiveness
  • Need to usetoRefsStay responsive
import { reactive } from 'vue'

const state = reactive({
  name: 'Tom',
  age: 18
})

// Direct deconstruction will lose its responsivenessconst { name, age } = state
name = 'Jerry' // It's no longer responsive
// Use toRefs to stay responsiveconst { name, age } = toRefs(state)
 = 'Jerry' // Still responsive

4. Use suggestions

  1. Scenarios using ref:
    • Responsiveness of basic data types
    • Responsive data that needs to be deconstructed
    • Management of single responsive data
const count = ref(0)
const message = ref('hello')
const isVisible = ref(true)
  1. Scenarios using reactive:
    • Responsiveness of complex objects
    • Combination of multiple related data
    • Data management without deconstruction
const state = reactive({
  user: {
    name: 'Tom',
    age: 18
  },
  settings: {
    theme: 'dark',
    notifications: true
  }
})
  1. Mixed use:
    • You can use ref in reactive objects
    • usetoRefsConvert reactive object to ref
const state = reactive({
  count: ref(0),
  user: {
    name: ref('Tom'),
    age: ref(18)
  }
})

// Convert to refconst { count, user } = toRefs(state)

By understanding these differences, you can choose the appropriate responsive solution based on the specific scenario, making the code clearer and easier to maintain.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.