花了一天的时间，地板式扫盲了 Vue 3 所有 API 盲点

<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
  count.value++;
};
</script>

<template>
  <div>{{ message }}</div>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('Hello, Vue 3!');
</script>

<template>
  <div>{{ user.name }}</div>
</template>
<script setup>
import { reactive } from 'vue';
const user = reactive({
  name: 'Alice',
  age: 25
});
</script>

<template>
  <div>{{ fullName }}</div>
</template>
<script setup>
import { ref, computed } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => `${firstName.value} ${lastName.value}`);
</script>

<template>
  <div>{{ count }}</div>
</template>
<script setup>
import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});
setInterval(() => {
  count.value++;
}, 1000);
</script>

<template>
  <teleport to="body">
    <div class="modal">This is a modal</div>
  </teleport>
</template>
<script setup>
</script>
<style scoped>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>

<template>
  <>
    <header>Header</header>
    <main>Main Content</main>
    <footer>Footer</footer>
  </>
</template>
<script setup>
</script>

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
);
</script>

<template>
  <div>{{ message }}</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const message = ref<string>('Hello, TypeScript!');
</script>

<template>
  <button @click="handleClick">Click me</button>
</template>
<script setup>
import { defineEmits } from 'vue';
const emit = defineEmits(['customEvent']);
const handleClick = () => {
  emit('customEvent', 'Hello, Vue 3!');
};
</script>

<template>
  <Child />
</template>
<script setup>
import { provide } from 'vue';
import Child from './Child.vue';
provide('message', 'Hello from Parent!');
</script>
Child.vue
<template>
  <div>{{ message }}</div>
</template>
<script setup>
import { inject } from 'vue';
const message = inject('message');
</script>