前端Vue篇之vue3 ref 能处理对象了？

在 Vue 3 中，ref 确实可以用来处理对象了。Vue 3 引入了 Composition API，这是一个新的编写组件的方式，它使得处理响应式数据更加灵活和高效。ref 是 Composition API 中的一个函数，用于创建一个响应式的引用数据。当你使用 ref 来处理基本数据类型（比如字符串、数字等）时，它会自动被包裹在一个对象里，你可以通过 .value 属性来访问或修改这个数据。

对于对象，Vue 3 提供了一个叫做 reactive 的函数，它专门用来创建响应式的对象。但这并不意味着 ref 不能处理对象。实际上，你也可以使用 ref 来处理对象，只是当你这么做时，整个对象会被作为一个响应式引用来处理，而不是对象内部的每个属性。这意味着，如果你直接修改对象内部的属性，这个修改不会触发界面更新。但如果你替换了整个对象，界面则会相应更新。

简而言之，使用 ref 来处理对象是完全可行的，只是它的工作方式与处理基本数据类型有所不同。如果你需要一个响应式的对象，并且希望对象内部的修改能够触发更新，那么使用 reactive 更加合适。如果你只是需要一个对象的引用，并且可以接受通过替换整个对象来触发更新，那么使用 ref 就足够了。

举个例子，假设你有一个用户对象，你可以这样使用 ref:

javascript 复制代码

import { ref } from 'vue'

const user = ref({
  name: 'John',
  age: 30
})

// 访问属性
console.log(user.value.name) // "John"

// 修改属性值不会触发更新
user.value.name = 'Jane'

// 替换整个对象会触发更新
user.value = { name: 'Jane', age: 30 }

在上面的示例中，我们使用 ref 创建了一个包含对象的响应式引用 obj，然后可以通过 obj.value 来访问和修改对象的属性。请注意，在使用 ref 处理对象时，需要通过 obj.value 来访问对象的属性。

而如果你使用 reactive，则可以直接修改对象内的属性并触发更新：

javascript 复制代码

import { reactive } from 'vue'

const user = reactive({
  name: 'John',
  age: 30
})

// 直接修改属性
user.name = 'Jane' // 这会触发界面更新

如果您需要更复杂的对象处理，推荐使用 reactive 或 toRefs 来处理对象，这样可以更好地管理对象的响应性和引用。

相关文章：
前端Vue篇之Vue3响应式：Ref和Reactive