Vue3 学习笔记—Script Setup 语法糖用了才知道有多爽

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

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

script setup 是啥?

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

写法简便：

1. <script setup> 
2. ... 
3. </script> 

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

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

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

1. <template> 
2.  {{todoList}} 
3. </template> 
4. <script> 
5. export default { 
6.  setup(){ 
7.   let todoList = [ 
8.    {todo:"我想看海",isCheck:false}, 
9.    {todo:"我想浪漫",isCheck:true}, 
10.   ] 
11.   return{ 
12.    todoList, 
13.   } 
14.  } 
15. } 
16. </script> 

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

可以简化上述代码为：

1. <template> 
2.  {{todoList}} 
3. </template> 
4. <script setup> 
5.  let todoList = [ 
6.   {todo:"我想看海",isCheck:false}, 
7.   {todo:"我想浪漫",isCheck:true}, 
8.  ] 
9. </script> 

2、组件自动注册

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

1. <template> 
2.  <SetUp></SetUp> 
3.  <set-up></set-up> 
4. </template> 
5. <script setup> 
6.  import SetUp from "./SetUp.vue" 
7. </script> 

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

3、组件数据传递

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

1. <template> 
2.  {{ a }} {{ b }} 
3. </template> 
4.  
5. <script> 
6. import { toRefs } from "vue" 
7. export default { 
8.  setup(props,context){ 
9.   const { a,b } = toRefs(props) 
10.   return { 
11.    a, 
12.    b 
13.   } 
14.  } 
15. } 
16. </script> 

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

1. <template> 
2.  {{ a }} {{ b }} 
3. </template> 
4.  
5. <script setup> 
6. import { toRefs } from "vue" 
7. const props = defineProps({ 
8.   a: String, 
9.   b: String 
10. }) 
11. const { a, b } = toRefs( props ) 
12. </script> 

4、获取 attrs、slots 和 emits

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

setup() 内获取如下：

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

使用 script setup 语法糖时，

• useAttrs 方法 获取 attrs 属性
• useSlots 方法获取 slots 插槽
• defineEmits 方法获取 emit 自定义事件

1. <script setup> 
2.  import { useAttrs, useSlots } from 'vue' 
3.  const slots = useSlots(); 
4.  const attrs = useAttrs(); 
5.  
6.  const emits = defineEmits(['getChild']); 
7. </script> 

5、对外暴露属性

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

子组件暴露属性：

1. <template> 
2.  {{msg}} 
3. </template> 
4.  
5. <script setup> 
6. import { ref } from 'vue' 
7.  
8. let msg = ref("Child Components"); 
9.  
10. // defineExpose无需导入，直接使用 
11. defineExpose({ 
12.  msg 
13. }); 
14. </script> 

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

1. <template> 
2.  <Child ref="child" /> 
3. </template> 
4.  
5. <script setup> 
6. import { ref, onMounted } from 'vue' 
7. import Child from './components/Child.vue' 
8.  
9. let child = ref(null); 
10.  
11. onMounted(() => { 
12.  console.log(child.value.msg); // Child Components 
13.  console.log(child.value.num); // 123 
14. }) 
15. </script> 

原文链接：https://www.toutiao.com/a7033663484797796877/