Vue篇.03-组合式API [setup()]，一文搞定基础应用

前端

2023-06-03 17:49:23

探索 Vue 3 的组合式 API [setup()]: 灵活管理组件逻辑

组合式 API 的魔力

在 Vue 3 的世界中，组合式 API 横空出世，带来了一种管理组件状态和逻辑的新方式，提供了无与伦比的灵活性。其中，setup() 方法是这颗皇冠上的明珠，它在组件生命周期的黎明时分被调用，负责初始化组件的内部运作。

拥抱组合式 API 的优势

组合式 API 不仅是一种时尚，更是一股强大的力量，赋予组件以下超能力：

可重用性： 不再重复自己，轻松在多个组件中重用 setup() 方法，节省代码量并保持代码库整洁。
可测试性： 将组件逻辑封装在独立的函数中，让你可以轻松对其进行单元测试，确保代码的稳定性。
可维护性： 清晰分离状态和逻辑，让你的组件保持整洁有序，便于维护和故障排除。

setup() 的秘密配方

进入 setup() 的厨房，了解它的基本用法：

道具： 作为组件的传参，包含组件所需的外部数据。
上下文： 一个神奇的对象，提供对组件环境的访问，包括插槽、属性和事件。

setup() 的运作方式

当组件实例化时，setup() 会拉开序幕，按照以下时序展开：

搅拌道具，进行预处理，为下一步做准备。
注入 setup() 魔药，它将状态和逻辑完美融合。
调用 render() 魔法，将组件的内部世界变为现实。
编译模板，生成虚拟 DOM，为最后的亮相做好准备。
打上补丁，将虚拟 DOM 转化为真正的 DOM，让组件栩栩如生。
挂载模板，将组件插入文档流，与世界互动。

代码示例：揭秘 setup() 的实际应用

让我们用一个示例点亮 setup() 的力量：

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0) // 初始化响应式变量

    const increment = () => {
      count.value++ // 响应式地更新 count
    }

    return {
      count,
      increment
    }
  }
}
</script>