composition API学习——setup函数

首先我们得需要了解composition api这个概念，它并不是基于用户层面上的，而是主要针对于vue框架自身来说的，它将vue中的很多功能拆分成了一个一个的hook，然后将他们组合起来便形成了vue3.0的composition api，所以当我们在使用时，它是什么其实对于我们来说并不太重要。

Setup

compositionAPI中首先要说的便是setup，当出现setup函数后 ，我们vue整体的难度有了上升，因为更接近于js的原生编程了，更加具有灵活性了不再像以前那样只需要套用模板写就行了，在vue组件中，我们主要在setup函数这个位置去编写composition api。

setup其实就是组件的另外一个选项（因此这也就是我前面所说的vue3其实是compositionAPI+选项式API），只不过这个选项强大到我们可以使用它来替代之前所编写的大部分其他选项，比如：methods、computed、data、生命周期等选项。

接下来我们一起了解其参数、返回值的使用。

参数问题

它主要有两个参数：props、context。

props非常好理解，它其实就是父组件传递过来的属性会被放到props对象中，我们在setup函数中如果需要使用属性时，可以直接通过props参数获取，而不再需要再通过this去获取了。

//在vue3中依然是具有props这个选项的，因为它得规定传递过来的数据类型
props: {
    message: {
        type: String,
        required: true
    }
},
setup(props) {
//直接通过props获取属性不再需要通过this了
    console.log(props.message);
},

另外一个参数是context，我们也称之为是一个SetupContext，它里面包含有三个属性：

（1）attrs：里面包含了所有的非props属性。

（2）slots：父组件传递过来的插槽。

（3）emit：当我们组件内部需要发出事件时会用到emit。

**返回值问题 **

setup既然是一个函数 ，那么它也会有返回值，它的返回值是用来做什么的呢 ？

（1）setup的返回值便是在template模板中被使用。

（2）也就是说我们可以通过setup的返回值来替代data选项（但是当setup和data选项同时存在时，使用的是setup中的数据）

setup中不可以使用this的原因

官方现在对此的解释是：this并没有指向当前组件实例，因为setup的调用发生在data、computed、methods被解析之前，所以无法在setup中获取this。

但是其实在之前实习时看到的官方文档是这样描述的：大概含义是不可以使用this是因为组件实例还没有被创建出来，但是在后来阅读源码的过程中，代码却是按照如下顺序执行的：

（1）调用 createComponentInstance 创建组件实例。

（2）调用 setupComponent 初始化component内部的操作。

（3）调用 setupStatefulComponent 初始化有状态的组件。

（4）在 setupStatefulComponent 取出了 setup 函数。

（5）通过callWithErrorHandling 的函数执行 setup。

因此从上面的代码执行顺序我们可以看出， 组件实例肯定是在执行 setup 函数之前就创建出来的，因为先是调用的createComponentInstance方法，接下来才是调用setup并执行。