文章目录一、先一句话总纲二、先讲最原始的setup() 函数三、再讲现在主流script setup四、两者功能对比最关键五、最核心区别背这一段就够六、你能立刻记住的超级口诀七、我再用最通俗的话总结一遍八、注册components不能写在setup函数里一、先一句话总纲-setup()Vue3 原来的原始写法手动挡要写return麻烦。javascript-script setup官方给的语法糖简写版自动挡不用return代码更少现在全都用这个。二、先讲最原始的setup() 函数你就把它理解成组件的入口函数比 beforeCreate 还早执行。里面没有 thisthis undefined不能用 this.$refs、this.message 之类。接收两个参数jssetup(props,context){}props父组件传过来的值响应式但不能改context里面有 emit、attrs、slots必须 return你在 setup 里定义的变量、方法不 return模板就看不见jssetup(){constcountref(0)return{count}// 不 return 模板用不了}缺点麻烦、啰嗦、要写一堆重复代码。三、再讲现在主流它就是Vue 帮你自动把代码塞进 setup() 里还自动 return。不用写 return你定义啥模板直接用vuescript setupconstcountref(0)/scripttemplate{{count}}!--直接用不用return--/template导入组件就能用jsimportChildfrom./Child.vue直接在模板用 不用注册原始写法还要jsexportdefault{components:{Child}}script setup 全都省了。四、两者功能对比最关键1.接收 props 原始 setup jsexportdefault{props:[title],setup(props){console.log(props.title)}}script setup jsconstpropsdefineProps({title:String})2.触发事件 emit原始 setup jssetup(props,{emit}){emit(my-event)}script setup jsconstemitdefineEmits([my-event])emit(my-event)3.获取 attrs、slots 原始 setup 用 context jssetup(props,{attrs,slots})script setup 用API jsimport{useAttrs,useSlots}fromvueconstattrsuseAttrs()constslotsuseSlots()五、最核心区别背这一段就够setup()手动写手动 return要写 export default、components代码多适合老项目、复杂控制不用 return导入组件直接用用 defineProps / defineEmits现在官方推荐、所有人都用这个六、你能立刻记住的超级口诀原始 setup手动挡要 return麻烦。script setup自动挡不用 return简洁好用。功能一模一样只是写法不一样。现在开发全都用 script setup。七、我再用最通俗的话总结一遍-setup()是基础版本什么都要自己写-script setup是懒人舒适版Vue 帮你把重复的事全干了。-它们底层跑起来是一样的。-你以后写 Vue3直接用script setup就对了八、注册components不能写在setup函数里先看注册componentsVue 知道我能用哪些组件叫什么名字。再解析模板看到 去表里查有这个名字认识。最后才执行 setup去运行子组件自己的逻辑生成数据、渲染内容。