刚开始使用ScriptSetup语法糖的时候，小编会提示这是一个实验属性。如果要使用，需要修复vue版本。6月底，提案正式敲定。在v3.1.3版本上，它会继续使用，但仍然会有实验性建议的提示。在V3.2中，hints将被移除，一些过时的API将被移除。什么是脚本设置？Scriptsetup是vue3新的语法糖，不是新的功能模块。它只是简化了以往组合API必须返回（return）的写法，具有更好的运行时性能。易于编写：使用脚本设置语法糖时，可以直接使用内部属性或方法，无需返回；引入子组件可以自动注册，可以不注册组件直接使用等，接下来介绍脚本设置语法糖的具体使用以及与setup()函数的区别。1.属性和方法不需要返回，直接用setup()写组合API即可。内部定义的属性和方法必须先使用return暴露给上下文，然后才能在外部使用。否则会报错。写法是：{{todoList}}使用脚本设置语法糖，不需要返回和设置函数，只需在脚本设置中定义它们即可。上面的代码可以简化为：beromantic",isCheck:true},]2.组件自动注册到脚本设置的语法糖中。导入的组件可以自动注册，不需要通过组件注册，并且不能指定当前组件的名称，文件名会自动为主名，省去name属性。和写在setup()中的组合API，导入的组件必须在components中注册后才能使用，否则无法正常导入。3、组件数据从父组件传递给子组件时，需要通过props接收。setup(props,context)接收两个参数，props接收传入的数据，使用setup()接收数据如下：{{a}}{{b}}和脚本设置语法糖来接收props中的数据，使用definePropsmethod获取，可以修改以上代码为：{{a}}{{b}}4.获取attrs,slots和emitssetup(props,context)接收两个参数context上下文，其中包含三个属性，slots和自定义事件部分。setup()中的获取如下：setup(props,context){const{attrs,slots,emit}=context//attrs获取组件传递的属性值，//组件中的slots插槽//emit自定义eventsubComponent}使用脚本设置语法糖时，useAttrs方法获取attrs属性useSlots方法获取slotslotdefineEmits方法获取emit自定义事件5.暴露属性脚本设置语法糖的组件默认不会暴露任何内部声明的属性。如果需要暴露一些属性，可以使用defineExpose。子组件暴露属性：{{msg}}父组件引用子组件暴露的属性：import{ref,onMounted}from'vue'importChildfrom'./components/Child.vue'letchild=ref(null);onMounted(()=>{console.log(child.value.msg);//ChildComponentsconsole.log(child.value.num);//123})
