刚开始使用 script setup 语法糖的学习笔时候，编辑器会提示这是语法一个实验属性，要使用的糖用话，需要固定 vue 版本。才知

在 6 月底，道有多爽该提案被正式定稿，学习笔在 v3.1.3 的语法版本上，继续使用但仍会有实验性提案的糖用提示，在 V3.2 中，才知才会去除提示并移除一些废弃的道有多爽 API。

script setup 是学习笔啥?

script setup 是 vue3 的新语法糖，并不是语法新增的功能模块，只是糖用简化了以往的组合式 API 必须返回(return)的写法，并且有更好的才知运行时性能。

写法简便：

<script setup> ... </script> 

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

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

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

<template>  { { todoList}} </template> <script> export default {   setup(){    let todoList = [    { todo:"我想看海",isCheck:false},    { todo:"我想浪漫",isCheck:true},   ]   return{     todoList,   }  } } </script> 

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

可以简化上述代码为：

<template>  { { todoList}} </template> <script setup>  let todoList = [   { todo:"我想看海",isCheck:false},   { todo:"我想浪漫",isCheck:true},  ] </script> 

2、组件自动注册

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

<template>  <SetUp></SetUp>  <set-up></set-up> </template> <script setup>  import SetUp from "./SetUp.vue" </script> 

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

3、组件数据传递

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

<template>  { {  a }} { {  b }} </template> <script> import {  toRefs } from "vue" export default {   setup(props,context){    const {  a,b } = toRefs(props)   return {     a,    b   }  } } </script> 

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

<template>  { {  a }} { {  b }} </template> <script setup> import {  toRefs } from "vue" const props = defineProps({    a: String,   b: String }) const {  a, b } = toRefs( props ) </script> 

4、获取 attrs、slots 和 emits

setup( props, context )接收两个参数，context 上下文环境，其中包含了属性、插槽、自定义事件三部分。

setup() 内获取如下：

setup(props,context){   const {  attrs, slots, emit } = context  // attrs 获取组件传递过来的属性值，  // slots 组件内的插槽  // emit 自定义事件 子组件 } 

 使用 script setup 语法糖时，

useAttrs 方法 获取 attrs 属性 useSlots 方法获取 slots 插槽 defineEmits 方法获取 emit 自定义事件 <script setup>  import {  useAttrs, useSlots } from vue  const slots = useSlots();  const attrs = useAttrs();  const emits = defineEmits([getChild]); </script> 

5、对外暴露属性

script setup 语法糖的组件默认不会对外暴露任何内部声明的属性。如果有部分属性要暴露出去，可以使用 defineExpose。

子组件暴露属性：

<template>  { { msg}} </template> <script setup> import {  ref } from vue let msg = ref("Child Components"); // defineExpose无需导入，直接使用 defineExpose({   msg }); </script> 

父组件引用子组件暴露的属性：

<template>  <Child ref="child" /> </template> <script setup> import {  ref, onMounted } from vue import Child from ./components/Child.vue let child = ref(null); onMounted(() => {   console.log(child.value.msg); // Child Components  console.log(child.value.num); // 123 }) </script>