vue3 中，setup 函数 和 <script setup> 的区别

• App.vue → 根组件
• ChildSetup.vue → 用 setup 函数 的子组件
• ChildScriptSetup.vue → 用 的子组件

**## 1. App.vue

<template>
<div>
<h2>父组件</h2>
<ChildSetup ref="setupRef" />
<ChildScriptSetup ref="scriptSetupRef" />
</div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import ChildSetup from './ChildSetup.vue'
import ChildScriptSetup from './ChildScriptSetup.vue'

const setupRef = ref(null)
const scriptSetupRef = ref(null)

onMounted(() => {
console.log('setup 子组件实例:', setupRef.value)
console.log('script setup 子组件实例:', scriptSetupRef.value)
})
</script>

2. ChildSetup.vue（setup 函数写法）

<template>
<div>
<h3>我是 setup 函数组件</h3>
<p>{{ msg }}</p>
<button @click="increase">count: {{ count }}</button>
</div>
</template>

<script>
import { ref } from 'vue'

export default {
name: 'ChildSetup',
setup(props, { expose }) {
const msg = 'Hello from setup()'
const count = ref(0)
function increase() {
count.value++
}

// 显式暴露出去
expose({ msg, count, increase })

return {
msg,
count,
increase,
}
}
}
</script>

3. ChildScriptSetup.vue（

<template>
<div>
<h3>我是 script setup 语法糖组件</h3>
<p>{{ msg }}</p>
<button @click="increase">count: {{ count }}</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const msg = 'Hello from <script setup>'
const count = ref(0)
function increase() {
count.value++
}
// 如果不写 defineExpose，默认不暴露任何东西
defineExpose({
msg,
count,
increase
})
</script>

运行效果

1. 页面上能看到两个子组件，按钮点了都会加 1。
2. 打开控制台，你会看到类似输出：

setup 子组件实例: Proxy { msg: "Hello from setup()", count: RefImpl, increase: ƒ }
script setup 子组件实例: Proxy { msg: "Hello from <script setup>", count: RefImpl, increase: ƒ }

如果你把 ChildScriptSetup.vue 里的 defineExpose 删掉， 再看输出，会变成：

script setup 子组件实例: Proxy {}
```**