vue3中setup语法糖和setup函数的区别？

初步打印

曾几何时，我也以为这两种写法是一模一样的。直接深究到编译层面才会发现区别，先列出两种写法：

js 复制代码

// 组件一：setup函数方式
<template>
    <div>
        <h1>{{ msg }}</h1>
        <button @click="increase">count:{{count}}</button>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    setup(){
        const msg = 'Foo Setup'
        const count = ref(0)
        function increase(){
            count.value++
        }
        
        return {
            msg,
            count,
            increase
        }
    }
}
</script>

js 复制代码

// 组件二：setup语法糖方式
<template>
    <div>
        <h1>{{ msg }}</h1>
        <button @click="increase">count:{{count}}</button>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const msg = 'Foo Script Setup'
const count = ref(0)
function increase(){
    count.value++
}
</script>

当在父组件中引用两个组件并通过ref分别把两个组件的实例打印出来时，会看到两个Proxy，但是会发现在setup函数 实现的组件中可以拿到定义的msg、count、increase，而setup语法糖 实现的组件中却是空的。

对比编译结果

在vite打包的项目中，可以用这个插件vite-plugin-inspect 配置到vite.config.js中重新启动工程就会看到有一个新的链接:http://localhost:5173/__inspect/可以查看编译结果，它会展示当前程序目前用到的所有组件。分别点入两个组件中查看：

左边展示的是原始代码，右边展示的是编译结果。像template在编译结果中是不存在的，它会被转化成render函数、h1变成了虚拟节点h1。主要区别在script的部分：在setup语法糖组件中，多了一个expose()

expose函数

作用：暴露指定的实例成员

像在上方的打印结果处，看到setup函数实现的组件 打印的实例中有msg、count、increase这些成员被暴露出来。那暴露出成员好不好呢，其实它给了使用组件者一个机会通过实例内的成员去主动改动这些信息 ，一旦真的去改动了其实就打破了单项数据流。

其实上面描述的就是vue2的时候一个很明显的问题，因此在vue3中它引入了expose函数来解决这个问题。可以用它来控制我们想暴露的成员。

setup函数中如何暴露成员

js 复制代码

<script>
import { ref } from 'vue';

export default {
    setup(_,{ expose }){ //第二个参数中有expose函数
        const msg = 'Foo Setup'
        const count = ref(0)
        function increase(){
            count.value++
        }
        
        // expose()则什么都不暴露，可以按需暴露
        expose({
            msg
        })
        
        return {
            msg,
            count,
            increase
        }
    }
}
</script>

setup语法糖中如何暴露成员

js 复制代码

<script setup>
import { ref } from 'vue';

const msg = 'Foo Script Setup'
const count = ref(0)
function increase(){
    count.value++
}

// defineExpose 它是一个宏
// 宏：仅存在于编译时态
defineExpose({
    msg
})
</script>