为什么要引入组合API

随着vue开始得到越来越多的开发人员的认可，使用其组建的大型项目也越来越多。但是在大型项目的开发和维护过程中遇到了一些问题。主要有以下两个

1）代码难以理解

因为vue2.x中的API强制我们按选项组织代码，实现某个逻辑的代码可能会被拆分到好几个选项中。

2)体取各个组件之间重用逻辑困难

因为vue3.0引入了组合API，可以将代码编写为函数，每个函数处理某个特定的功能，不需要按选项组织代码。这也使得组件之间提取和重用逻辑变得简单。

注意：组合API在data,computed,methods等等选项之前解析，所以不能在其内部访问这些选项

setup()函数

setup函数是组合API的入口，它在prop解析之后，beforeCreate运行之前被调用。

setup函数的参数

setup函数可以接受两个可选参数，第一个参数是props，请看以下代码

app.component('compo', {
    props: ['name'],
    setup(props) {
        console.log(props.name)
    }
})

props是响应式的，也就是说我们可以在watchEffect或者watch选项中执行副作用，但是值得注意的一点是不能去解构props，否则会失去响应性，如下

app.component('compo', {
    props: ['name'],
    setup({name}) {
        Vue.watchEffect(() => {
            console.log(name) //不再是响应式的
        })
    }
})

setup函数第二个参数是一个context对象，它是一个普通的javascript对象，可以用它来访问三个组件属性，分别是组件属性context.attrs，插槽context.slots和发出的事件context.emit。如下

setup(props, context) {
    console.log(context.attrs)
    console.log(context.slots)
    console.log(context.emit)
}

因为context只是一个普通的context对象，所以可以对其进行结构