setup() 函数与语法糖

一、先一句话总纲

-setup()：Vue3 原来的原始写法，手动挡，要写return，麻烦。```javascript-<script setup>：官方给的语法糖（简写版），自动挡，不用return，代码更少，现在全都用这个。

二、先讲最原始的：setup() 函数

你就把它理解成：
组件的入口函数，比 beforeCreate 还早执行。

1. 里面没有 this

this = undefined
不能用 this.$refs、this.message 之类。

2. 接收两个参数

jssetup(props,context){}

• props：父组件传过来的值（响应式，但不能改）
• context：里面有 emit、attrs、slots

3. 必须 return！

你在 setup 里定义的变量、方法，
不 return，模板就看不见！

jssetup(){constcount=ref(0)return{count}// 不 return 模板用不了}

缺点

麻烦、啰嗦、要写一堆重复代码。

三、再讲现在主流：

它就是：
Vue 帮你自动把代码塞进 setup() 里，还自动 return。

1. 不用写 return

你定义啥，模板直接用：

vue

<script setup>constcount=ref(0)</script>

<template>{{count}}<!--直接用！不用return--></template>

2. 导入组件就能用

jsimportChildfrom'./Child.vue'

直接在模板用 ，不用注册！

原始写法还要：

jsexportdefault{components:{Child}}

script setup 全都省了。

四、两者功能对比（最关键）

1.接收 props 原始 setup： jsexportdefault{props:['title'],setup(props){console.log(props.title)}}script setup： jsconstprops=defineProps({title:String})2.触发事件 emit

原始 setup： jssetup(props,{emit}){emit('my-event')}script setup： jsconstemit=defineEmits(['my-event'])emit('my-event')3.获取 attrs、slots 原始 setup 用 context： jssetup(props,{attrs,slots})script setup 用API： jsimport{useAttrs,useSlots}from'vue'constattrs=useAttrs()constslots=useSlots()

五、最核心区别（背这一段就够）

1. setup()

• 手动写，手动 return
• 要写 export default、components
• 代码多，适合老项目、复杂控制

• 不用 return
• 导入组件直接用
• 用 defineProps / defineEmits
• 现在官方推荐、所有人都用这个

六、你能立刻记住的超级口诀

• 原始 setup：手动挡，要 return，麻烦。
• script setup：自动挡，不用 return，简洁好用。
• 功能一模一样，只是写法不一样。
• 现在开发全都用 script setup。

七、我再用最通俗的话总结一遍

>-setup()是基础版本，什么都要自己写>-<script setup>是懒人舒适版，Vue 帮你把重复的事全干了。>-它们底层跑起来是一样的。>-你以后写 Vue3，直接用<script setup>就对了

八、注册（components）不能写在setup函数里

1. 先看注册（components）
   Vue 知道：我能用哪些组件，叫什么名字。

2. 再解析模板
   看到 ，去表里查：有这个名字，认识。

3. 最后才执行 setup
   去运行子组件自己的逻辑，生成数据、渲染内容。