Composition API 产生背景：
当我们的组件变得更大时，业务逻辑关注点的代码也会变长，假如想找到某个在多处代码中有频繁操作的属性进行新需求的具体操作，会在100甚至更多行代码中跳来跳去，找到属于该属性的逻辑，尤其是刚接手项目的新人来说，这会导致组件难以阅读和理解。
CompositionAPI中能够配置与相同逻辑问题相关的代码，这正是我们需要的。
setup函数的使用:
1.Composition API 所有代码编写之前，一定建立在setup函数之上;
2.setup(props, context){}在 created 实例被完全初始化之前执行；
3.由于setup是在实例被初始化之前执行的，故在setup中的this上没有任何东西;
4.故 setup中不能使用this；
故 setup中不能调用外部方法(template/mounted……/methods/……)；
而 在setup外部app实例的 方法/生命周期函数 中可以通过this.$options.setup()调用setup中的return{}的所有内容
setup(){}中必须return{}，其 return 的内容被暴露在外部，故可以在 template 中直接使用其 return 出来的变量、函数……;
const app = Vue.createApp({
methods: {
test() {
console.log(this.$options.setup());
}
},
template: `
<div @click="handleClick">{{name}}</div>
`,
mounted() {
this.test();
},
setup(props, context) {
return {
name: "zhz",
handleClick: () => {
alert("setup");
}
}
}
});
const vm = app.mount("#root");
Options API vue2中如何组织代码的：我们会在一个vue文件中data，methods，computed，watch中定义属性和方法，共同处理页面逻辑 缺点： 一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散，项目小还好，清晰明了，但是项目大了后，一个methods中可能包含很多个方法，往往分不清哪个方法对应着哪个功能 优点：新手入门会比较简单
Composition API 在vue3 Composition API 中，代码是根据逻辑功能来组织的，一个功能的所有api会放在一起（高内聚，低耦合），这样做，即时项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有API，而不像vue2 Options API 中一个功能所用到的API都是分散的，需要改动，到处找API的过程是很费时间的 缺点：学习成本可能会增加，以前的思维方式也要转变 优点：Composition API 是根据逻辑相关性组织代码的，提高可读性和可维护性，基于函数组合的 API 更好的重用逻辑代码（在vue2 Options API中通过Mixins重用逻辑代码，容易发生命名冲突且关系不清）
