Vue 3 中,ref 和 reactive 的区别和使用

在 Vue 3 中,refreactive 都是用来创建响应式数据的方法,但它们有以下主要区别:

1. 使用场景不同

ref:

  • 主要用于基本数据类型(String、Number、Boolean 等)
  • 也可以用于对象/数组,但需要通过 .value 访问
  • 适合单个响应式数据的管理
javascript 复制代码
import { ref } from 'vue'

// 基本类型
const count = ref(0)
console.log(count.value) // 0

// 对象类型
const user = ref({
  name: 'Tom',
  age: 18
})
console.log(user.value.name) // 'Tom'

reactive:

  • 主要用于对象类型(Object、Array)
  • 直接访问属性,不需要 .value
  • 适合多个响应式数据的管理
javascript 复制代码
import { reactive } from 'vue'

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

2. 访问方式不同

ref:

  • 在 setup 中需要通过 .value 访问
  • 在模板中自动解包,直接使用
vue 复制代码
<script setup>
import { ref } from 'vue'

const count = ref(0)
// setup 中需要 .value
const increment = () => {
  count.value++
}
</script>

<template>
  <!-- 模板中直接使用,不需要 .value -->
  <div>{{ count }}</div>
</template>

reactive:

  • 直接访问属性,不需要 .value
  • 在模板和 setup 中的访问方式相同
vue 复制代码
<script setup>
import { reactive } from 'vue'

const state = reactive({
  count: 0
})
// 直接访问
const increment = () => {
  state.count++
}
</script>

<template>
  <!-- 直接访问 -->
  <div>{{ state.count }}</div>
</template>

3. 解构行为不同

ref:

  • 支持解构,解构后仍然保持响应性
  • 可以使用 toRefs 将 reactive 对象的属性转换为 ref
javascript 复制代码
import { ref, toRefs } from 'vue'

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

// ref 解构后保持响应性
const { name, age } = toRefs(user)
name.value = 'Jerry' // 仍然是响应式的

reactive:

  • 解构后会失去响应性
  • 需要使用 toRefs 保持响应性
javascript 复制代码
import { reactive } from 'vue'

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

// 直接解构会失去响应性
const { name, age } = state
name = 'Jerry' // 不再是响应式的

// 使用 toRefs 保持响应性
const { name, age } = toRefs(state)
name.value = 'Jerry' // 仍然是响应式的

4. 使用建议

  1. 使用 ref 的场景 :
    • 基本数据类型的响应式
    • 需要解构的响应式数据
    • 单个响应式数据的管理
javascript 复制代码
const count = ref(0)
const message = ref('hello')
const isVisible = ref(true)
  1. 使用 reactive 的场景 :
    • 复杂对象的响应式
    • 多个相关数据的组合
    • 不需要解构的数据管理
javascript 复制代码
const state = reactive({
  user: {
    name: 'Tom',
    age: 18
  },
  settings: {
    theme: 'dark',
    notifications: true
  }
})
  1. 混合使用 :
    • 可以在 reactive 对象中使用 ref
    • 使用 toRefs 转换 reactive 对象为 ref
javascript 复制代码
const state = reactive({
  count: ref(0),
  user: {
    name: ref('Tom'),
    age: ref(18)
  }
})

// 转换为 ref
const { count, user } = toRefs(state)

通过理解这些区别,你可以根据具体场景选择合适的响应式方案,使代码更加清晰和易于维护。

相关推荐
@大迁世界8 分钟前
Promise.all 与 Promise.allSettled:一次取数的小差别,救了我的接口
开发语言·前端·javascript·ecmascript
知识分享小能手10 分钟前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
DoraBigHead23 分钟前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
LuckySusu23 分钟前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
卓伊凡27 分钟前
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
前端
笨笨鸟慢慢飞30 分钟前
Vue3后退不刷新,前进刷新
前端
LuckySusu32 分钟前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu32 分钟前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu33 分钟前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
fruge35 分钟前
从 0 到 1 理解前端工程化:图表化解析核心逻辑
前端