Vue3 script setup 语法糖，超爽体验

在这里插入图片描述

简介

注：因为setup语法糖是vue3.2正式确定下来的议案，所以vue3.2的版本是真正适合setup语法糖的版本。

---

1. 属性和方法无需返回，直接使用

以前使用响应式数据是：

现在使用 setup 语法糖，不需要return返回 和 setup函数，只需要全部定义在

reactive, computed, 也一样可以使用：

---

2. 组件自动注册

在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。示例：

---

3. 组件数据传递(props和emits)

props 和 emits 在语法糖中使用 defineEmits 和 defineProps 方法来使用：

子组件 Child.vue：

父组件 Home.vue：

---

4. 获取 slots 和 attrs

可以通过useContext从上下文中获取 slots 和 attrs。不过提案在正式通过后，废除了这个语法，被拆分成了useAttrs和useSlots。示例：

// 旧


// 新

---

5. 对外暴露属性(defineExpose)

父组件 Home.vue：