[TOC]

Vue3 在早期版本（ 3.0.0-beta.21 之前）中对 composition api 的支持，只能在组件选项 setup 函数中使用。

<template>
  <h1>{{ msg }}</h1>
  <button type="button" @click="add">count is: {{ count }}</button>
  <ComponentA />
  <ComponentB />
</template>

<script>
import { defineComponent, ref } from 'vue'
import ComponentA from '@/components/ComponentA'
import ComponentB from '@/components/ComponentB'

export default defineComponent({
  name: 'HelloWorld',
  components: { ComponentA, ComponentB },
  props: {
    msg: String,
  },
  setup(props, ctx) {
    const count = ref(0)

    function add() {
      count.value++
    }
    // 使用return {} 把变量、方法暴露给模板
    return {
      count,
      add,
    }
  },
})
</script>

在 3.0.0-beta.21 版本中增加了 

注意，同名的CSS Module，后面的会覆盖前面的。

<a name="GLAtA"></a>
## 3 使用组件

在组件选项中，模板需要使用组件（除了全局组件），需要在 components 选项中注册。<br />而在 <script setup> 中组件不需要再注册，模板可以直接使用，其实就是相当于一个顶层变量。<br />建议使用大驼峰（PascalCase）命名组件和使用组件。
```vue

<script setup>
import HelloWorld from './HelloWorld.vue'
</script>

<template>
  <HelloWorld />
</template>

组件name