#### 文章目录 * * [一、先一句话总纲](#一、先一句话总纲) * [二、先讲最原始的：setup() 函数](#二、先讲最原始的：setup() 函数) * [三、再讲现在主流：\ ``` ```javascript ``` 2. 导入组件就能用 ```javascript js import Child from './Child.vue' ``` 直接在模板用，不用注册！原始写法还要： ```javascript js export default { components: { Child } } ``` script setup 全都省了。 ### 四、两者功能对比（最关键） ```javascript 1. 接收 props 原始 setup： js export default { props: ['title'], setup(props) { console.log(props.title) } } script setup： js const props = defineProps({ title: String }) 2. 触发事件 emit ``` ```javascript 原始 setup： js setup(props, { emit }) { emit('my-event') } script setup： js const emit = defineEmits(['my-event']) emit('my-event') 3. 获取 attrs、slots 原始 setup 用 context： js setup(props, { attrs, slots }) script setup 用 API： js import { useAttrs, useSlots } from 'vue' const attrs = useAttrs() const slots = useSlots() ``` ### 五、最核心区别（背这一段就够） 1. setup() * 手动写，手动 return * 要写 export default、components * 代码多，适合老项目、复杂控制 2. * 不用 return * 导入组件直接用 * 用 defineProps / defineEmits * 现在官方推荐、所有人都用这个 ### 六、你能立刻记住的超级口诀 * 原始 setup：手动挡，要 return，麻烦。 * script setup：自动挡，不用 return，简洁好用。 * 功能一模一样，只是写法不一样。 * 现在开发全都用 script setup。 ### 七、我再用最通俗的话总结一遍 ```javascript > - setup() 是基础版本，什么都要自己写 > -

setup() 函数与语法糖

文章目录