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

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

[[440450]]

刚开始使用 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. </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. </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 自定义事件 子组件 

 使用 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> 

 

责任编辑:姜华 来源: 今日头条
相关推荐

2021-12-01 08:11:44

Vue3 插件Vue应用

2023-04-27 11:07:24

Setup语法糖Vue3

2022-07-13 10:07:31

vue3组件监听器

2021-12-02 05:50:35

Vue3 插件Vue应用

2022-02-18 09:39:51

Vue3.0Vue2.0Script Set

2024-03-15 08:45:31

Vue 3setup语法

2018-09-13 11:24:58

CPU

2022-08-04 14:38:49

vue3.2setup代码

2021-11-30 08:19:43

Vue3 插件Vue应用

2021-11-16 08:50:29

Vue3 插件Vue应用

2023-11-28 09:03:59

Vue.jsJavaScript

2021-11-17 08:24:47

Vue3 插件Vue应用

2021-12-29 07:51:21

Vue3 插件Vue应用

2021-12-08 09:09:33

Vue 3 Computed Vue2

2023-12-11 07:34:37

Computed计算属性Vue3

2023-12-14 08:25:14

WatchVue.js监听数据

2022-06-21 12:09:18

Vue差异

2021-05-24 08:04:03

script setuVue Vue 3

2023-11-29 08:49:31

Vue.jsData 函数
点赞
收藏

51CTO技术栈公众号