Vue3 reactive 和 ref 的区别及使用场景

MrYu2020-11-05VueVue

介绍

Vue3 Composition API 中 reactive 和 ref 的区别及使用场景

基本使用

ref

用于定义基本数据类型，内部基于 Object.defineProperty 或 Proxy 实现响应式。

<template>
  <div>{{ count }}</div>
  <button @click="increment">+1</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function increment() {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

reactive

用于定义对象或数组类型数据，返回一个响应式对象。

<template>
  <div>{{ state.name }}</div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      name: '小人物',
      age: 25
    })

    return {
      state
    }
  }
}
</script>

主要区别

1. 数据类型限制

ref：适合基本数据类型（string, number, boolean）也可以用于对象
reactive：只能用于对象（object, array, map, set）

2. 取值方式

ref：需要 .value 获取值
reactive：不需要 .value，直接访问属性

3. 重新赋值

ref：直接整体替换 count.value = 10
reactive：直接修改属性 state.name = '新名字'

4. 解构丢失响应式

const state = reactive({ name: '小人物', age: 25 })

// 解构会丢失响应式
const { name } = state

// 正确做法：使用 toRefs
const { name } = toRefs(state)

使用场景

ref 适用场景

基本数据类型
需要整体替换的值
单个变量

const count = ref(0)
const title = ref('Vue3')
const isShow = ref(true)

reactive 适用场景

复杂对象
多个相关属性组合
表单数据

const form = reactive({
  username: '',
  password: '',
  remember: false
})

toRef 和 toRefs

import { reactive, toRefs } from 'vue'

const state = reactive({
  count: 0,
  name: '小人物'
})

// 将 reactive 对象的属性转换为 ref
const { count, name } = toRefs(state)

// toRef 用于单个属性
const countRef = toRef(state, 'count')

注意事项

WARNING

ref 定义的对象类型，内部会自动转为 reactive 实现
reactive 不能替换整个对象，只能修改属性
解构 reactive 对象需要使用 toRefs 保持响应式

总结

特性	ref	reactive
数据类型	任意	对象
取值方式	`.value`	直接访问
重新赋值	整体替换	修改属性
解构	保持响应式	需要 toRefs

Vue3 reactive 和 ref 的区别及使用场景

ON THIS PAGE