ref() 和 reactive() 区别

ref() 和 reactive() 都是 Vue 3 中用于创建响应式数据的方法，但它们之间存在一些关键差异。

首先，ref() 用于创建响应式的标量值，比如数字、字符串、布尔值等基本数据类型，以及对象和数组等复杂数据类型。当你使用 ref() 时，你会得到一个带有 .value 属性的对象，这个对象是响应式的。例如：

const count = ref(0)

这里的 count 是一个响应式的 ref 对象，你可以通过 count.value 来访问和修改它的值。

而 reactive() 用于创建响应式的对象和数组。它接受一个对象或数组，并返回一个响应式的代理对象。例如：

const state = reactive({ count: 0 })

这里的 state 是一个响应式的对象，你可以直接访问和修改它的属性，如 state.count。

所以，主要的区别在于：

1. 用途：

   • ref()：适用于各种数据类型，包括基本类型和引用类型。

   • reactive()：仅适用于对象和数组。

2. 访问和修改：

   • ref()：通过 .value 属性访问和修改值。

   • reactive()：直接访问和修改对象的属性。

3. 嵌套数据的响应式：

   • ref()：如果内部包含对象或数组，需要递归地使用 ref() 或 reactive()。

   • reactive()：自动处理嵌套对象和数组的响应式。

4. 性能：

   • reactive()：对于大量数据的对象，性能可能优于使用多个 ref()。

总之，根据你的数据类型和需求，你可以选择使用 ref() 或 reactive() 来创建响应式数据。对于基本类型和单个值，ref() 是一个好选择；对于复杂的对象和数组，reactive() 更为适合。

示例：

使用 ref()：

import { ref } from 'vue'

export default {

setup() {

const count = ref(0)

function increment() {

  count.value++

}

return {

  count,

  increment

}

}

}

使用 reactive()：

import { reactive } from 'vue'

export default {

setup() {

const state = reactive({ count: 0 })

function increment() {

  state.count++

}

return {

  count: state.count,

  increment

}

}

}