持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情
说到vue3，最大的更新当然是组合式api了，在react里面叫hook，底层逻辑实际上差不多，但是为啥叫组合式api？
因为确实使用起来就像是组合一样，我们来分一下是怎么组合的？
首先我们再理解一下组件，一般我们的组件是一个ui界面和相关的业务逻辑
看看这样一个界面，我们一般会分成4个组件
左边一个列表，右边配置，配置下面2个子组件
我们组件的组合就是把这几个组件一起组合成一个大组件，最大的组件就是一个页面了
列如这个页面的组件可能就想这样
//config.vue
<template>
<div>
<list>
//左边列表组件
</list>
<layout-conf>
<layout>
//布局组件
</layout>
<info>
//信息组件
</info>
</layout-conf>
</div>
</template>
像这样组合我们所有的组件就完成了一个页面
我们定义好了一个组件，其他页面都可以重用这个组件，这确实非常方便，减少了我们代码量，便于维护，但是我们有时候重用的东西似乎不像是一个组件
我们看看组件一般包括哪些？
export default {
name: "test-new",
props:{
//数据
},
data(){
//数据
},
computed:{
//数据处理
},
watch:{
//数据处理
},
beforeCreate() {
//各种钩子函数
},
created() {
//各种钩子函数
},
mounted() {
//各种钩子函数
},
beforeDestroy() {
//各种钩子函数
},
methods:{
m1(){
//各种业务逻辑函数
},
m2(){
},
}
}
可以看到我们的组件除了dom和css之外，还有我们的业务逻辑代码，但是我们的业务处理逻辑，需要分别放到不同位置的地方，这个就是重点
抽离业务代码，大家都可能做过一些，问题是抽离，如何抽离呢？等待下一篇
