--- theme: cyanosis --- 「本文已参与好文召集令活动，[点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！](https://juejin.cn/post/6978685539985653767)」还记得刚体验 script setup 语法糖的时候，编辑器提示我这是一个实验性的提案，要使用的话，需要固定 Vue 版本。而在 6 月底，该提案被正式定稿，在 v3.1.3 的版本上，你可以继续使用但仍会有实验性提案的提示，在 v3.2 中，才会去除提示并移除一些废弃的 API。 ### script setup 是个啥？它是 Vue3 的一个新语法糖，在 `setup` 函数中。所有 ES 模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。相对于之前的写法，使用后，语法也变得更简单。使用方式极其简单，仅需要在 `script` 标签加上 `setup` 关键字即可。示例： ```js ``` ### 组件自动注册在 script setup 中，引入的组件可以直接使用，无需再通过`components`进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写`name`属性了。示例： ```js ``` 如果需要定义类似 name 的属性，可以再加个平级的 script 标签，在里面实现即可。 ### 组件核心 API 的使用 #### 使用 props 通过`defineProps`指定当前 props 类型，获得上下文的props对象。示例： ```js ``` #### 使用 emits 使用`defineEmit`定义当前组件含有的事件，并通过返回的上下文去执行 emit。示例： ```js ``` #### 获取 slots 和 attrs 可以通过`useContext`从上下文中获取 slots 和 attrs。不过提案在正式通过后，废除了这个语法，被拆分成了`useAttrs`和`useSlots`。示例： ```js // 旧 // 新 ``` ### defineExpose API 传统的写法，我们可以在父组件中，通过 ref 实例的方式去访问子组件的内容，但在 script setup 中，该方法就不能用了，setup 相当于是一个闭包，除了内部的 `template`模板，谁都不能访问内部的数据和方法。如果需要对外暴露 setup 中的数据和方法，需要使用 defineExpose API。示例： ``` ``` #### 属性和方法无需返回，直接使用！这可能是带来的较大便利之一，在以往的写法中，定义数据和方法，都需要在结尾 return 出去，才能在模板中使用。在 script setup 中，定义的属性和方法无需返回，可以直接使用！示例： ```js ``` ### 写在最后写作不易，希望可以获得你的一个「赞」。如果文章对你有用，可以选择「收藏」。如有文章有错误或建议，欢迎评论指正，谢谢你。❤️ #### 欢迎阅读其它文章 - [实战：用 Vue3 实现一个 Message 消息组件](https://juejin.cn/post/6975770170413776926) - [实战：用 Vue3 实现 Image 组件，顺便支持懒加载](https://juejin.cn/post/6981232153233195039) - [One Piece，Vue.js 3.0 带来了哪些更新](https://juejin.cn/post/6968352814858764296) - [一篇文章消化 ES7、ES8、ES9 主要新特性](https://juejin.cn/post/6983625803271503886/) - [技术团队普遍存在的问题和解决方案](https://juejin.cn/post/6979053938087723021) - [ES6中常用的10个新特性讲解](https://juejin.cn/post/6844903618810757128)