记得vue刚推出 setup 时，也看过不少相关介绍，但始终没能get到那个点，时间一久，也就懵懂的那样过去了。
最近又重新看起了vue3+突然对这个 组合式api 有了更新的认识，于是记录一笔吧！
照例，来点需求吧！
需求：给你一个输入框，用户输入时，同时把输入的信息转成base64（这个栗子可能不太好，没办法，刚好在看vueuse这个库，也正好看到useBase64这个hook，没办法就它了）大概就是下面这个样子
可能在vue2的时候，我们采取的措施可能是利用 v-model 去双向绑定 input 的值，然后对值做一个 watch ，执行对应的转成base64的工具函数；或者用oninput事件来做一个实时的转换
vue2可能的代码如下：
import toBase64 from 'xx/xxx'
data() {
return {
text: 'input的值',
base64: '转换后的值'
}
}
//当然也可能你会用watch去做
watch: {
text: function (newQuestion, oldQuestion) {
xxx
}
},
methods: {
// input 事件
input() {
this.base64 = toBase64(this.text)
}
}
如果按照vue2的思路，避免不了 data、methods、watch这几个api，一个业务需要这三个选项，那两个？三个？甚至更多，自然就导致了vue3文档所描述的那样，不管是data选项还是methods都变得比较庞杂。文档关于这点的描述链接
这里就不讨论 mixins 或者封装成组件的区别了
vue3可能代码：
// html
<input v-model="text" placeholder="请输入一些文字" >
<p>
对应的base64: {
{
base64}}
</p>
// 将页面所需的两个变量和处理逻辑融合在一起，搞成一个hook
// 页面需要的 v-model ---> text ,编码后的 base64
const useSetBase = () => {
//这个是 v-model 绑定的变量
const text = ref('')
// vueuse中的hook，同时返回编码后的变量(也是响应性包装后的哦)
const {
base64 } = useBase64(text)
// 将两个响应的变量返回
return {
base64,
text
}
}
// 组合式api
setup() {
const {
base64,text } = useSetBase()
return {
base64,
text
}
},
// 组件的其他生命周期
...
上面可以看到，我们把原本分散到 data、methods、watch中处理，全部融合到了一个hook中，称为useXXX，你也可以认为useXXX是一个工具函数。经过组合式api ref （当然还有其他）处理后，返回的这些变量同时具有响应式，经过 setup 的返回后，就和之前定义在data里面的功效一样，同时在组件的其余部分也可以访问和使用。
组合式api同时也提供了很多钩子（包括生命周期的、监听、计算属性等），那么我们是不是可以把类似的都统一封装到hook文件夹（useDel、useQuery、useAdd）中，然后再统一到setup中返回给组件，这样是不是就实现了 把之前冗杂的拆分了？
你可能会疑问，这不就是把各自需要的组合在一起了吗？那我问你，难道不应该在一起吗？（一个数num，和一个点击增加num值的函数add（甚至更多的处理函数），为什么要把他们拆分到 data 和 methods 中呢）
同时组合式api提供了几乎和选项式api一样的的钩子函数，足以实现之前选项式组件的功能