返回

Vue 3 中的 setup 与 ref(), reactive(), toRefs()：深层次剖析

前端

引言

Vue 3 中的 composition API 是一个全新的 API 系统，它为开发人员提供了更加灵活和强大的方式来管理组件的状态和数据。与 Vue 2 中的 options API 不同，composition API 允许您将组件的逻辑分解成更小的函数，并以一种更声明的方式组织它们。

setup() 函数

setup() 函数是 composition API 的核心。它是组件生命周期的第一个钩子函数，在组件挂载之前执行。setup() 函数接收两个参数：props 和 context。props 是组件的属性对象，context 是一个包含其他有用信息的上下文对象。

在 setup() 函数中，您可以使用 ref(), reactive() 和 toRefs() API 来创建和管理组件的状态和数据。

ref() 函数

ref() 函数用于创建响应式的引用对象。响应式引用对象是一个包装器对象，它将一个原始值包裹起来，并将其变成响应式的。这意味着当原始值发生变化时，响应式引用对象也会自动更新。

例如，以下代码创建了一个名为 count 的响应式引用对象：

const count = ref(0);

现在，当您调用 count.value 时，您将得到 count 的当前值。当您更改 count.value 时，Vue 将自动更新视图。

reactive() 函数

reactive() 函数用于创建响应式对象。响应式对象是一个普通对象，但它的所有属性都是响应式的。这意味着当对象的属性发生变化时，Vue 将自动更新视图。

例如，以下代码创建了一个名为 user 的响应式对象：

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

现在，当您调用 user.name 或 user.age 时，您将得到 user 的当前值。当您更改 user.name 或 user.age 时，Vue 将自动更新视图。

toRefs() 函数

toRefs() 函数用于将响应式对象转换为响应式引用对象数组。这在您需要在模板中使用响应式对象的属性时非常有用。

例如，以下代码将 user 对象转换为响应式引用对象数组：

const { name, age } = toRefs(user);

现在，您可以在模板中使用 name 和 age 来访问 user 对象的属性。当 user 对象的属性发生变化时，Vue 将自动更新视图。

结论

setup() 函数、ref() 函数、reactive() 函数和 toRefs() 函数是 Vue 3 中 composition API 的核心。这些 API 为开发人员提供了更加灵活和强大的方式来管理组件的状态和数据。如果您想充分利用 Vue 3，那么您需要掌握这些 API。

延伸阅读