Vue3 Composition API写烦了,试试新语法糖吧—setup script

前言

Vue3发布近一年了,相信大家对Vue3的新特性,新语法都很熟悉了。那么在使用Composition API的过程中,有没有觉得整个过程比较繁琐。比如你的模板里用到了大量的state和方法的时候,都需要在setUp()函数里一一return出去。这个过程就比较难受了。

setup script 语法糖

setup script 是vue3的一个新的语法糖,用起来特别简单。只需要在script标签中加上setup 关键字。


<script setup>
export default {
...
}
</script>

setup script 的作用

1. 子组件无需手动注册

setup script语法自动注册子组件,很容易理解。我们来对比一下Composition API和setup script 的写法,一看便知。

Composition API语法:


<template>
<Child >我是子组件</Child>
</template> <script>
import Child from '@/components/child.vue'
export default {
components:{
Child
},
setup(){ return { }
}
}
</script>

setup script 语法:


<template>
<Child >我是子组件</Child>
</template> <script setup>
// 组件只需要引入,不需要手动注册
import Child from '@/components/child.vue'
</script>

看到这里,相信聪明的大家都已经了解了setup script 的第一个作用了。

2. 不需要返回方法和属性

写一个简单的点击按钮,数字加1的demo,来对比一下两种写法的不同。

Composition API提供的setup()生命周期,我们经常这样来使用它:

    <template>
<div>{{state.count}}</div>
<button @click="handleClick">点我+1</button>
</template> <script>
export default {
import { reactive,ref,watch } from 'vue'; setup(){ const state = reactive({
count:0;
}) const handleClick = () => {
state.count++
} return {
state, handleClick
}
}
}
</script>

setup script 语法:

    <template>
<div>{{state.count}}</div>
<button @click="handleClick">点我+1</button>
</template> <script setup>
import { reactive,ref,watch } from 'vue'; const state = reactive({
count:0;
}) const handleClick = () => {
state.count++;
}
</script>

setup script 语法更加简洁,属性和方法不需要返回暴露出去,template模板中就可以直接使用。上面的demo代码量比较少,setup script 的作用直观上并不凸出。等到业务比较复杂,申明的属性和方法比较多的时候,setup script语法糖用起来就爽很多了。

3. 支持props、context API

使用Composition API的朋友都知道,setup()钩子暴露了两个属性props,context。

那么,肯定有人疑惑,如果不使用setup()钩子了,我们怎么获取props和context?

我们先来看看props,context中是什么?

props:

Vue3 Composition API写烦了,试试新语法糖吧—setup script

context:

Vue3 Composition API写烦了,试试新语法糖吧—setup script

其实,vue3已经给我们提供了这方面的API:useAttrs,useSlots, defineProps, defineEmits ,让我们一起来看看它们的用法:

获取context中的attrs, emit, expose, slots:


<script setup>
import { useAttrs,useSlots, defineExpose, defineEmits } from 'vue'
export default { // 获取attrs
const attrs = useAttrs()
console.log(attrs) // 获取 emit
const emit = defineEmits(['change', 'close'])
emit('change', 'change事件的payload')
emit('close', 'close事件的payload') // 获取expose
const a = 1
const b = 2
defineExpose({
a,
b
}) // 获取slots
const slots = useSlots()
console.log(slots)
}
</script>

获取props:


<script setup>
// 接受父组件传递的props
const props = defineProps({
msg: String,
name: String
age: Number
}) </script>

总结

以上就是vue3新出的语法糖setup script的基本使用方法了,是不是很香呢?这个语法糖在2021年6月29日正式定稿了,有兴趣的同学快去试试吧。

参考文章:

https://github.com/vuejs/rfcs/pull/227#issuecomment-870105222

福禄·研发中心
福小斌
上一篇:[HNOI2013]比赛 搜索


下一篇:lamda表达式和尾置返回类型