Vue3 中 setup 函数与 script setup 用法总结

在 Vue3 中，setup 函数和 script setup 是两种新引入的编写组件的方式，它们都是 Composition API 的一部分。

setup 函数:
setup 函数是一个新的组件选项，它作为在组件内使用 Composition API 的入口。在 setup 函数中，我们可以定义和返回响应式数据，创建计算属性和侦听器，定义方法等。它在组件实例被创建和 props 被解析后立即调用，但在 DOM 渲染之前。

<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  }
}
</script>

script setup:
script setup 是 Vue 3.2 引入的一项新特性，它提供了一种更简洁的方式来编写 Vue 组件。在 script setup 中，我们可以直接定义和导出组件选项，无需包装在 setup 函数或 export default 对象中。

<template>
  <div>{{ count }}</div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

注意，script setup 与普通的 标签并不兼容，你不能在同一个组件中同时使用两者。另外，script setup 还有一些其他的规则和限制，你可以在 Vue 官方文档 中查阅详细信息。