vue3中reactive和ref如何使用和区别

最新推荐文章于 2025-08-27 22:26:25 发布

JackieDYH

最新推荐文章于 2025-08-27 22:26:25 发布

阅读量154

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/JackieDYH/article/details/131677429

Vue 专栏收录该内容

376 篇文章

订阅专栏

在Vue3中，reactive和ref都是响应式API。它们都可以用于创建响应式数据和观察其变化。

区别：

ref函数需要传入一个初始值，并返回一个对象，该对象有一个value属性，可以直接读取和赋值。而reactive函数可以传入一个普通对象，并生成一个响应式对象，该对象可以直接读取和修改属性。

示例：

import { reactive, ref } from 'vue'

// ref示例
const count = ref(0)
console.log(count.value) // 0
count.value++ // 直接对value属性进行赋值
console.log(count.value) // 1

// reactive示例
const state = reactive({
  count: 0,
  name: 'John'
})
console.log(state.count) // 0
state.count++ // 直接对属性进行赋值
console.log(state.count) // 1

ref函数适用于简单类型变量，比如数字、字符串等。而reactive函数适用于复杂类型变量，比如对象和数组。

示例：

import { reactive, ref } from 'vue'

// ref示例
const age = ref(18)
const name = ref('John')
console.log(age.value, name.value) // 18 John
age.value++ // 直接对value属性进行赋值
name.value = 'Mary'
console.log(age.value, name.value) // 19 Mary

// reactive示例
const state = reactive({
  name: 'John',
  info: {
    age: 18,
    sex: '男'
  }
})
console.log(state.info.age, state.info.sex) // 18 男
state.info.age++ // 直接对属性进行赋值
state.name = 'Mary'
console.log(state.info.age, state.name) // 19 Mary