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

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 {}