深入理解 Vue3 的 setup 函数：组合式 API 的基石

最新推荐文章于 2025-04-09 15:07:05 发布

阿贾克斯的黎明

最新推荐文章于 2025-04-09 15:07:05 发布

阅读量1.2k

点赞数 12

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_57836225/article/details/145738714

版权

前端专栏收录该内容

530 篇文章

订阅专栏

深入理解 Vue3 的 setup 函数：组合式 API 的基石

在 Vue3 的开发世界里，setup函数无疑是开启组合式 API 大门的关键钥匙。无论是从 Vue2 选项式 API 过渡而来的开发者，还是初次接触 Vue3 的新手，理解setup函数都是掌握 Vue3 开发的重要一步。本文将深入剖析setup函数，结合实际代码示例，让你对它有全面且清晰的认识。

一、为什么要学习 setup 函数？

Vue3 引入了强大的组合式 API，而setup函数正是使用这些 API 的入口。几乎所有的组合式 API 都要在setup函数中书写，它就像是一个舞台，组合式 API 的各种精彩表演都在这里上演。如果在学习 Vue3 的初始阶段没有掌握setup函数，后续的学习就如同在没有打好地基的情况下盖楼，会越来越混乱。所以，学习 Vue3，从setup函数开始是个明智的选择。

二、setup 函数基础认知

setup是 Vue3 中的一个新配置项，它的值是一个函数。在一个简单的 Vue 组件中，它与我们熟悉的data、methods、name等配置项处于同等地位。下面我们通过代码示例来详细了解它的使用方式。

假设我们有一个名为App.vue的组件，初始代码如下：

<template>
  <div>
    <h1>你好</h1>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTell">查看联系方式</button>
    <p>姓名: {{ name }}</p>
    <p>年龄: {{ age }}</p>
    <p>联系方式: {{ tell }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '张三',
      age: 18,
      tell: '13812345678'
    };
  },
  methods: {
    changeName() {
      this.name = '李四';
    },
    changeAge() {
      this.age++;
    },
    showTell() {
      alert(this.tell);
    }
  }
};
</script>

<style scoped>
/* 样式代码 */
</style>

这是一个典型的 Vue2 选项式 API 的写法，数据配置在data函数中，方法定义在methods对象里。在 Vue3 中，我们要使用组合式 API，就需要借助setup函数来重新构建这个组件。

三、在组件中使用 setup 函数

首先，我们在组件中添加setup函数，它和data、methods等配置项是平级关系。

<script>
export default {
  setup() {
    // setup函数的内容
  }
}
</script>

3.1 在 setup 中定义数据

在setup函数中定义数据非常简单，就像在普通 JavaScript 代码中定义变量一样。

<script>
export default {
  setup() {
    // 定义数据
    let name = '张三';
    let age = 18;
    let tell = '13812345678';

    return {
      name,
      age
      // tell // 这里可以根据实际需求决定是否返回，模板中未使用可暂不返回
    };
  }
}
</script>

这里需要注意，如果直接这样定义数据，这些数据目前还不是响应式的。所谓响应式，就是当数据发生变化时，模板中使用该数据的地方会自动更新。但此时，如果我们在模板中使用这些数据，修改数据时页面并不会实时更新。不过，我们先暂时不处理这个问题，后续会专门讲解。

3.2 在 setup 中定义方法

在setup函数中定义方法也很直接，直接定义函数即可。但需要注意的是，在setup函数中，this关键字是undefined，不能像在 Vue2 的methods中那样使用this来访问数据。

<script>
export default {
  setup() {
    // 定义数据
    let name = '张三';
    let age = 18;
    let tell = '13812345678';

    // 定义方法
    function changeName() {
      name = '李四';
    }

    function changeAge() {
      age++;
    }

    function showTell() {
      alert(tell);
    }

    return {
      name,
      age,
      changeName,
      changeAge,
      showTell
    };
  }
}
</script>

在上述代码中，我们定义了三个方法：changeName用于修改名字，changeAge用于增加年龄，showTell用于显示联系方式。由于数据目前不是响应式的，所以点击修改名字和修改年龄按钮时，页面不会更新，但方法实际上是被调用了，我们可以通过在方法中添加console.log来验证这一点。

四、setup 函数的执行时机

setup函数的执行时机比 Vue2 中的beforeCreate生命周期钩子还要早。我们可以通过简单的代码来验证这一点。

<script>
export default {
  beforeCreate() {
    console.log('beforeCreate钩子执行');
  },
  setup() {
    console.log('setup函数执行');
    return {
      // 数据和方法
    };
  }
}
</script>

当我们在浏览器中运行这个组件并刷新页面时，在控制台中会先看到setup函数执行，然后才是beforeCreate钩子执行。这表明setup函数在组件初始化的早期阶段就开始执行，为后续的组件功能搭建提供基础。

五、总结

通过以上的学习，我们对 Vue3 中的setup函数有了一个较为全面的了解。在从 Vue2 的选项式 API 过渡到 Vue3 的组合式 API 时，setup函数是关键的桥梁。我们知道了在setup函数中如何定义数据和方法，虽然目前数据还不是响应式的，但这为我们后续学习响应式数据的定义和使用打下了基础。同时，我们也清楚了setup函数的执行时机，这有助于我们在开发过程中更好地理解组件的初始化过程。

在后续的学习中，我们将深入探讨如何在setup函数中创建响应式数据，以及如何使用其他强大的组合式 API 来构建更高效、更灵活的 Vue 应用程序。希望本文能帮助你在 Vue3 的学习道路上迈出坚实的一步。