简介：为了开始使用组合式api，需要有实际使用的地方在vue组件中这个位置就是setup函数。
本质：setup其实是组件的另外一个选项：这个选项可以替代大部分的其他的选项。（比如methods，computed，watch，data，生命周期等）
一、最基础的setup的使用
在html显示数据
<template>
<div class="">
<h2>message:{{message}}</h2>
</div>
<template>
<script>
export default {
setup(){
const message = 'hello'
return {
message
}
}
}
</script>
<style scoped>
</style>二、reactive api 实现响应式
问： 想在setup中定义的数据提供响应式的特性，有什么原因在使用reative的函数时变成响应式，而且为什么可以变成响应式？
1.因为当我们使用reative函数来处理我们的数据之后，数据再次被使用时就会进行依赖收集。
2.当数据发生改变时，所有收集到的一俩都是进行对应的响应式操作（比如更新当前界面）
3.当原来编写data选项时也是在内部交给reative函数将其变成响应式对象的。
reative不可用于简单的数据可以对对象使用。
在组件中使用reative要使用import引入
三、ref api 实现简单数据响应式
1.在reative API中对于传入的数据具限制性，传入的数据必须是一个对象或者数组类型。（如果传入基本数据类型会报错。）
2.vue3提供了另一个api叫做ref API ref会返回一个可变的响应式对象，该对象作为一个响应式的引用维护着它内部的值，这就是ref名称的来源。
3.它内部的值是在ref的value属性中被维护的；
注意事项：
1.在引入ref的值时，Vue会自动帮助我们进行解包操作，所以我们并不需要在模板中通过 ref.value 的方式来使用；
2.但是在 setup 函数内部，它依然是一个ref引用， 所以对其进行操作时，我们依然需要使用 ref.value的方式；
