Vue 3 中 setup 函数的用法

深入探索 Vue 3 中 setup 函数的用法

在 Vue 3 的广阔世界里，setup函数无疑是一颗璀璨的明星，它为开发者带来了前所未有的便利与灵活性。今天，就让我们一同深入探索setup函数的各种奇妙用法，揭开它神秘的面纱。

一、setup 函数初相识

（一）定义与作用

在 Vue 3 的组件体系中，setup函数是一个全新且至关重要的组件选项。它在组件实例创建之前就会被调用，就像是组件的 “幕后军师”，负责为组件的运行进行各种前期准备工作。在这里，我们可以进行状态的定义、计算属性的创建、方法的定义，还能引入其他强大的组合式 API，为组件的逻辑构建打下坚实基础。

（二）参数详解

setup函数接受两个参数：props和context。

• props：它承载着从父组件传递给当前组件的属性数据，就像是组件的 “装备”，让组件能够根据不同的 “装备” 展现出不同的功能和样式。
• context：这是一个包含了多个重要信息的上下文对象，其中attrs包含了那些没有在组件props中声明的属性；slots用于访问组件的插槽内容，为组件的内容复用提供了可能；emit则是一个方法，用于触发组件的自定义事件，实现组件间的通信。

（三）返回值的奥秘

setup函数的返回值可不简单，它就像是一个 “百宝箱”，里面的内容会被用于组件的模板以及其他地方。通常情况下，我们会返回一个对象，对象中的属性和方法都能在模板中轻松使用，让模板能够根据我们设定的逻辑进行动态展示。

二、基本用法示例

下面，让我们通过一个简单的示例来感受一下setup函数的基本用法。

<template>
  <div>
    <h1>{
  
  { title }}</h1>
    <button @click="increment">点击增加</button>
    <p>当前计数: {
  
  { count }}</p>
  </div>
</template>
<script>
import { ref } from 'vue';
export default {
  setup() {
    const title = '欢迎使用 Vue 3';
    const count = ref(0); // 使用 ref 创建响应式数据
    const increment