// 將 `setup` attribute 添加到 `<script>` 代碼塊上
// 里面的代碼會被編譯成組件 `setup()` 函數(shù)的內(nèi)容
// 就是這么簡單明了
<script setup>

</script>

// 無需使用components，引入即注冊，起飛有沒有
<script setup>
    import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>

// 當使用 `<script setup>` 的時候，任何在 `<script setup>` 聲明的頂層的綁定
// (包括變量，函數(shù)聲明，以及 import 引入的內(nèi)容) 都能在模板中直接使用

import { ref } from 'vue'
<script setup>
// 變量
let msg = ref('Hello!')

// 函數(shù)
function log() {
  msg.value = "World!";
  console.log(msg)
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
</template>

<script setup>
const props = defineProps({
  foo: String
})
</script>

<script setup>
const emit = defineEmits(['change', 'delete'])
// emit('change', '1111')
</script>

<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
  a,
  b
})
</script>

<script>
// 普通 <script>, 在模塊范圍下執(zhí)行(只執(zhí)行一次)
// 聲明額外的選項、例如自定義組件名
export default {
  name: '組件1'
}
</script>

<script setup>
// code
</script>