vue3 setup函数与setup语法糖之间的区别

news2025/1/23 14:53:41

普通setup函数构建的组件

import {ref} from 'vue'
    export default {
        setup(){

            const count=ref(0)

            const handleUpdate=()=>{
               count.value++
            }
          return{
               count,
                handleUpdate
          }
        }
    }
</script>

使用setup语法糖构建的组件

<script setup>
    import {ref} from 'vue'
    const count=ref(0)

    const handleUpdate=()=>{
        count.value++
    }
</script>

从代码简洁度上来说setup语法糖显然更有优势一些

我们构建一个base页面将这两个组件引入之后再看
在这里插入图片描述
1.我们在Base页面分别引入了两个组件，并定义了他们各自的ref
2.控制台输出我们获取的ref对象来比较一下

组件1 是我们获取的setup函数构建的界面，我们看到他与我们基础的vue2的实例获取没有什么差别，可以直观的看到组件内部的方法，以及定义的数据
在这里插入图片描述
组件2是使用了setup语法糖构建的，我们发现返回的时候一个空对象，我们无法直接获取或者查看到组件内的信息
为了更进一步看的编译过程中两个组件的内容变化我们使用一个插件vite-plugin-inspect

这个插件可以帮助我们在业务编写过程中实时查看我们的编译源码
在这里插入图片描述
打开后找到我们的测试组件

使用了setup函数编写后的文件发现模板已经不在存在而是变成了一个render函数的形式导出，而我们使用setup函数的部分没有任何变化还是原样输出的

我们再看使用了setup语法糖的组件我们发现模板还是一样变成了render函数导出，但是我们的setup语法糖先转成了一个setup函数，并被额外加上了一个expose()函数
官方对这个函数有很明确的说明
在这里插入图片描述
当我们使用setup语法糖开发时常常也会使用到一个跟他相关的宏，defineExpose
例如我们需要在业务子组件中暴露子组件的一些数据，方法

   const restInfo=()=>{
     tableData.value=[];
     selectMod.value=[];
     tools.value=[
       {
         name:"**",
         code:1,
         select:true,
       },
       {
         name:"**",
         code:2,
         select:false,
       }
     ]
   }
  defineExpose({
    tableData,
    selectMod,
    restInfo
  });

我们改变setup语法糖组件并给他添加这个宏命令后

<template>
    <div style="width:6.25rem;height:3.125rem;background: #e3c528">这是组件2</div>
</template>

<script setup>
    import {ref} from 'vue'
    const count=ref(0)

    const handleUpdate=()=>{
        count.value++
    }
    defineExpose({
        count
    })
</script>

<style scoped>

</style>