Composition API （setup）&& Options API

Vue2

在Vue2中，我们编写组件的方式是 Options API：

Options API的一大特点就是在对应的属性中编写对应的功能模块； p比如data定义数据、methods中定义方法、computed中定义计算属性、watch中监听属性改变，也包括生命 周期钩子

但是这种代码有一个很大的弊端：

当我们实现某一个功能时，这个功能对应的代码逻辑会被拆分到各个属性中；

当我们组件变得更大、更复杂时，逻辑关注点的列表就会增长，那么同一个功能的逻辑就会被拆分的很分散；

尤其对于那些一开始没有编写这些组件的人来说，这个组件的代码是难以阅读和理解的（阅读组件的其他人）；

Vue3

在Vue3中，我们编写组件的方式是 Composition API：

将代码都写入到 setup 函数中，将一个逻辑块写到一起，不要上面一个下面一个，方便管理查看
在 setup 中可以编写比如methods、computed、watch、data、生命周期等等

setup 的参数 props 和 context

1.第一个参数：props 其实就是父组件传递过来的属性（由于 setup 中不可以访问 this 因此需要传过来）

2..第二个参数：context，它里面包含三个属性：

attrs：所有的非prop的attribute；
slots：父组件传递过来的插槽（这个在以渲染函数返回时会有作用，后面会讲到）；
emit：当我们组件内部需要发出事件时会用到emit（因为我们不能访问this，所以不可以通过 this.$emit发出事件）；

setup(props, {attrs, slots, emit}) {//解构的写法，可以实际用工哪个变量写哪个
      
},
 
setup(props, context) {  //普通的写法
   
},
 
setup() {  //可以不传参数
   
},

serup 的返回值

setup的返回值可以在模板template中被使用；
也就是说我们可以通过setup的返回值来替代 data，method 方法等；

当前计数: {{counter}}
<button @click="increment">+1button>
 
setup() {  
      let counter = 100; //普通定义的变量不是响应式的
 
      // 局部函数
      const increment = () => {
        counter++;
      }
 
      return {
        counter,
        increment
      }
},