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

前言

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

setup script 语法糖

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

setup script 的作用

1. 子组件无需手动注册

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

Composition API语法：

setup script 语法：

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

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

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

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

setup script 语法：

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

3. 支持props、context API

使用Composition API的朋友都知道，setup()钩子暴露了两个属性props,context。
那么，肯定有人疑惑，如果不使用setup()钩子了，我们怎么获取props和context？

我们先来看看props，context中是什么？

props:

context:

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

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

获取props：

总结

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

参考文章：

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

福禄·研发中心 福小斌