记得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一样的的钩子函数,足以实现之前选项式组件的功能