一文看懂vue3中setup()和＜script setup＞＜script＞的区别

最新推荐文章于 2025-04-28 15:42:41 发布

Ajekseg

最新推荐文章于 2025-04-28 15:42:41 发布

阅读量2.8k

点赞数 6

CC 4.0 BY-SA版权

分类专栏：前端 html 文章标签： redis 缓存 java

本文链接：https://blog.youkuaiyun.com/Ajekseg/article/details/123304898

本文探讨Vue3中的setup()函数与<script setup>的区别，包括组件不再需要components注册、props和emit的语法变化，以及如何通过setup()的两个参数props和context来接收和处理数据。同时，文章指出在setup()中定义的数据和方法需return返回，并介绍了不使用props配置时props接收值的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setup ()

setup () 是vue3新增加的组件。vue3采用了组合式 API ，为了使用组合式API，我们需要一个入口，在vue3组件中，称之为setup。

(简单点来说，就是vue2里面的data，method，computed···全不要啦，所有数据方法全写在setup里)

来看一个简单的例子:

<template>
  <div class="box">
    <h1 style="text-align: center;">{
  {testData}}</h1>
  </div>
</template>

<script>
export default {
  setup () {
    const testData = 'hello world'
  return {
    testData
  }
  }
}
</script>

注意：在setup()中定义的数据，方法都需要 return 返回出去，不然会报错

再看一个调用方法的例子:

<template>
  <div class="box" style="margin: 0 auto;text-align: center;">
    <button @click="testFunciton">点我</button>
  </div>
</template>

<script>
export default {
  setup () {
    const testFunciton = function () {
      console.log('你点了我');
    }
  return {
    testFunciton
  }
  }
}
</script>