前言
以下文章是我个人学习的输出方式，目的是为了夯实自己的技术基础。
【Options API 与 Composition API】
- 在
Vue2中主要使用的是选项式 API (Options API)的风格； - 在
Vue3中，继续支持Vue2选项式 API的同时，引入了组合式 API (Composition API)的风格；
Options API 的弊端
Options API将数据、方法、计算属性......分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。可参考如下动图：
Composition API 的优势
Composition API可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起，使代码更易于维护和复用。可参考如下动图：
说明：以上四张动图原创作者：大帅老猿
【拉开序幕的 setup】
setup 概述
setup是Vue3中一个新的配置项，值是一个函数，组件中所用到的：数据、方法、计算属性、监视......等等，均可配置在setup中。
特点如下：
setup函数返回的对象中的内容，可直接在模板中使用；setup中访问this是undefined；setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的；
setup 的返回值
- 若返回一个
对象：则对象中的属性、方法等，在模板中均可以直接使用； - 若返回一个
函数：则可以自定义渲染内容，代码如下：
setup(){
return ()=> '你好啊！'
}
setup 与 Options API 的关系
Vue2的配置（data、methos......）中可以访问到setup中的属性、方法；- 但在
setup中不能访问到Vue2的配置（data、methos......）； - 如果与
Vue2冲突，则setup优先；
