1️⃣ 使用 setup 语法糖

只需在 script 标签上写上 setup 代码如下（示例）：

<template>
</template>
<script setup>
</script>
<style scoped lang="less">
</style>

1️⃣ 引入组件

组件只需引入不用注册

<template>
  <div class="app-case">
    <chunk-1></chunk-1>
  </div>
</template>
<script setup>
  import chunk1 from './components/chunk-1.vue'
</script>
<style lang="scss" scoped>
</style>

1️⃣ 属性和方法也不用返回

由于 setup 不需写 return ，所以直接声明数据即可

<template>
  <div class="app-case">
    {{data1}}
    {{data2.a}}
    {{a}}
    <h1 @click="fun1">fun1</h1>
    <h1 @click="fun2">fun2</h1>
  </div>
</template>
<script setup>
import {
  ref, // 单个数据
  reactive, // 多个数据
  toRefs, // 数据解构
} from 'vue'
const data1 = ref(100)
const data2 = reactive({
  a: 10,
  b: 20
})
const { a, b } = toRefs(data2)
function fun1() {
  console.log('[ 🎯  fun1]')
}
const fun2 = () => {
  console.log('[ 🎯  fun2]')
}
</script>

1️⃣ props 的使用

<template>
  <div class="app-case">
    <chunk-one :name="name"></chunk-one>
  </div>
</template>
<script setup>
import chunkOne from './components/chunk-1.vue'
import { ref } from 'vue'
const name = ref('kun')
</script>

<template>
  <div class="chunk-1-case">
    {{name}}
  </div>
</template>
<script setup>
import { defineProps } from 'vue'
defineProps({
  name: {
    type: String,
    default: '我是默认值'
  }
})
</script>