vue3中script setup 语法糖

简介

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


<script setup>
...
</script>
<script setup>
...
</script>
<script setup>
...
</script>

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

属性和方法直接使用

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


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

组件自动注册

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


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

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

组件数据传递

父组件给子组件传值时，需要 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>
<template>
 {{ a }} {{ b }}
</template>
 
<script>
import { toRefs } from "vue"
export default {
 setup(props,context){
  const { a,b } = toRefs(props)
  return {
   a,
   b
  }
 }
}
</script>
<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>
<template>
 {{ a }} {{ b }}
</template>
 
<script setup>
import { toRefs } from "vue"
const props = defineProps({
  a: String,
  b: String
})
const { a, b } = toRefs( props )
</script>
<template>
 {{ a }} {{ b }}
</template>
 
<script setup>
import { toRefs } from "vue"
const props = defineProps({
  a: String,
  b: String
})
const { a, b } = toRefs( props )
</script>

获取 attrs、slots 和 emits

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


setup(props,context){
const { attrs, slots, emit } = context
// attrs 获取组件传递过来的属性值，
// slots 组件内的插槽
// emit 自定义事件 子组件
}
setup(props,context){
const { attrs, slots, emit } = context
// attrs 获取组件传递过来的属性值，
// slots 组件内的插槽
// emit 自定义事件 子组件
}
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>
<script setup>
 import { useAttrs, useSlots } from 'vue'
 const slots = useSlots();
 const attrs = useAttrs();
 
 const emits = defineEmits(['getChild']);
</script>
<script setup>
 import { useAttrs, useSlots } from 'vue'
 const slots = useSlots();
 const attrs = useAttrs();
 
 const emits = defineEmits(['getChild']);
</script>

对外暴露属性

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

子组件暴露属性：


<template>
 {{msg}}
</template>
 
<script setup>
import { ref } from 'vue'
 
let msg = ref("Child Components");
 
// defineExpose无需导入，直接使用
defineExpose({
 msg,
 num
});
</script>
<template>
 {{msg}}
</template>
 
<script setup>
import { ref } from 'vue'
 
let msg = ref("Child Components");
 
// defineExpose无需导入，直接使用
defineExpose({
 msg,
 num
});
</script>
<template>
 {{msg}}
</template>
 
<script setup>
import { ref } from 'vue'
 
let msg = ref("Child Components");
 
// defineExpose无需导入，直接使用
defineExpose({
 msg,
 num
});
</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>
<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>
<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>