前端实训：Vue3语法糖详解

scriptsetup有什么优势语法相比，它有更多的优势：样板内容更少，代码更简洁。能够使用纯Typescript声明props和抛出事件。更好的运行时性能（它的模板将被编译成与其相同范围内的渲染函数，没有任何中间代理）。更好的IDE类型推断性能（语言服务器从代码中提取类型的工作更少）。基本语法是vue3新增的语法糖，使用起来非常简单。前端训练只需要在script标签中加上setup关键字即可。中声明的函数和变量以及import引入的内容和组件可以直接在模板中使用：Reactive反应状态需要使用反应API显式创建。与setup()函数的返回值一样，ref值在模板中使用时将自动展开：设置中需要动态组件script使用动态组件时，使用dynamic:is绑定：效果如下：组件数据传递（props和emits）必须使用defineProps和defineEmitsAPI声明道具和发射。web前端训练有完整的类型推断，直接在定义组件的emits使用defineEmit定义当前组件包含的事件，并通过返回上下文。示例：父组件：子组件：效果如下：对外暴露属性（defineExpose)默认情况下不向外部暴露任何内部声明的属性。如果需要暴露一些属性，可以使用defineExpose。说白了就是把属性暴露给外部父组件：子组件：效果如下：注：defineProps、defineEmits、defineEmitsAPI无需引入，直接使用获取slots和attrs即可注：useContextAPI已弃用，取而代之的是更细分的api：useSlots和useAttrs。在useSlots和useAttrs是真正的运行时函数，返回值等同于setupContext.slots和setupContext.attrs，也可以在普通复合API中用于创建异步设置方法（顶级await）这样setup()函数将是异步的。文章来自前端工匠