vue3 学习笔记(九)——script setup 语法糖用了才知道有多爽

使用 script setup 语法糖时，内部的属性或方法可以直接使用，无需 return 返回；引入子组件可以自动注册，无需 components 注册可直接使用等等，接下来介绍 script setup 语法糖具体使用以及与 setup() 函数的区别。

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

setup() 来写组合式 API 时，内部定义的属性和方法，必须使用 return 暴露到上下文，外部才能够使用，否则就会报错，写法为：

{{todoList}}

使用 script setup 语法糖，不需要 return 和 setup函数，只需要全部定义到 script setup 内。

可以简化上述代码为：

{{todoList}}

2、组件自动注册

在 script setup 语法糖中，引入的组件可以自动注册，不需要再通过 components 进行注册，而且无法指定当前组件的名字，会自动以文件名为主，省去了 name 属性。

而在 setup() 写的组合式 API 中，引入的组件必须在 components 内注册之后才能使用，否则无法正常引入。

3、组件数据传递

父组件给子组件传值时，需要 props 接收。setup( props, context )接收两个参数，props 接收传递的数据，使用 setup() 接收数据如下：

{{ a }} {{ b }}

而 script setup 语法糖接收 props 中的数据时，使用 defineProps 方法来获取，可以修改上述代码为：

{{ a }} {{ b }}