Vue 3 的 setup 函数：职责与封装逻辑

前端

2024-02-04 09:12:29

前言

在 Vue 3 中，我们与 setup() 函数结下了不解之缘，它是一个强大的工具，可以帮助我们提升组件的可测试性、可重用性和组织性。本文将深入探讨 setup() 函数的职责，并指导你如何巧妙地封装其逻辑，让代码更加清晰易读。

`setup()` 函数的职责

setup() 函数主要负责两项关键任务：

初始化和返回组件状态： 它初始化组件的数据、计算属性和方法，并将其返回给模板。
生命周期钩子的替代： setup() 函数代替了 created() 和 beforeMount() 等生命周期钩子，允许我们在组件创建时执行逻辑。

封装 `setup()` 函数中的逻辑

将复杂逻辑封装到单独的函数中是保持 setup() 函数整洁和易于维护的最佳实践。以下是封装步骤：

识别需要封装的逻辑： 查找 setup() 函数中重复或复杂的逻辑块。
创建封装函数： 为每个逻辑块创建一个独立的函数，并从 setup() 函数中提取相关的代码。
将封装函数作为参数传递： 在 setup() 函数中，将封装函数作为参数传递给更高级别的函数或组件。
在封装函数中使用： 在封装函数中访问和修改组件状态，就像它们直接存在于 setup() 函数中一样。

封装示例

为了更好地理解封装，让我们来看一个实际示例：

// setup.js
import { ref, computed } from 'vue'

// 1. 识别需要封装的逻辑
const getFullName = (firstName, lastName) => {
  return `${firstName} ${lastName}`
}

// 2. 创建封装函数
export const useName = (firstName, lastName) => {
  const fullName = computed(() => getFullName(firstName, lastName))
  return { fullName }
}

// 3. 将封装函数作为参数传递
export default {
  setup() {
    // ...
    const { fullName } = useName('John', 'Doe')
    return { fullName }
  },
  // ...
}