Vue3之ref与reactive

Vue3之ref与reactive的区别

在Vue3中，ref和reactive都是用来创建响应式数据的方法，但它们之间有一些区别。

ref

ref可以用来创建一个简单的响应式数据，比如一个数字、字符串或者布尔值。它返回一个包含当前值的对象，我们可以通过.value来访问这个值。例如：

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

当我们更新count.value的值时，Vue会自动重新渲染相关的组件。

reactive

reactive则是用来创建一个包含多个属性的响应式对象。与ref不同，reactive返回的是一个普通的JavaScript对象，而不是一个包含值的对象。例如：

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: '张三',
  age: 18
})

console.log(state.count) // 0
console.log(state.name) // 张三
console.log(state.age) // 18

在reactive中，我们可以直接访问和修改对象中的属性，而不需要使用.value来访问和修改。

区别

1. ref可以用来创建简单的响应式数据，而reactive则是用来创建包含多个属性的响应式对象。
2. ref返回的是一个包含当前值的对象，而reactive返回的是一个普通的JavaScript对象。
3. 在访问和修改ref中的值时，需要使用.value来访问和修改；而在reactive中，我们可以直接访问和修改对象中的属性。

总的来说，ref适合用来创建单个的响应式数据，而reactive适合用来创建包含多个属性的响应式对象。