组合式 API 基础

通常，一个 Vue 组件对象大概包括一些 data 属性、生命周期钩子函数、methods、components、props 等配置项的 Object 对象，如示例代码 4-1-1 所示。

export default {
    name: 'test',
    components: {},
    props: {},
    data () {
        return {}
    },
    created(){},
    mounted () {},
    watch:{},
    methods: {}
}

这种通过选项来配置 Vue 组件的方式称作配置式 API，大部分的业务逻辑都是写在这些配置对应的方法或者配置里，这种方式使得每个配置各司其职，data、computed、methods、watch 每个组件选项都有自己的业务逻辑。然而，当我们的组件开始变得更大时，逻辑关注点的列表也会增长。尤其对于那些一开始没有编写这些组件的人来说，这会导致组件难以阅读和理解。

比如一个逻辑很复杂的大型组件，当我们想要关注一条流程逻辑时，可能需要来回地在 data、computed、methods、watch 之间切换滚动这些代码块，这种碎片化使得理解和维护复杂组件变得困难，虽然在之前的章节讲过 Mixin 在一定程度上可以抽离出一些组件中的代码，但始终不是最高效的。

为了能够将同一个逻辑关注点的相关代码更好地收集在一起，Vue 3 引入了与配置式 API 相对应的组合式 API，将上面的配置式 API 代码转换成组合式 API 代码，如示例代码 4-1-2 所示。

import {onMounted,reactive,watch} from 'vue'
export default {
    props: {
        name: String,
    },
    name: 'test',
    components: {},
    setup(props, ctx) {
        console.log(props.name)
        console.log('created')
        const data = reactive({
            a: 1
        })
        watch(
            () => data.a,
            (val, oldVal) => {
                console.log(val)
            }
        )
        onMounted(()=>{
        })
        const myMethod = (obj) =>{
        }
        retrun {
            data,
            myMethod
        }
    }
}

可以看到，组合式 API 的代码逻辑都可以写在 setup 方法中，这使得逻辑更加集中、更加原子化，从而提升了可维护性。