Composition-API

简介

Composition API简介：一组基于函数的附加API，能够灵活地组成组件逻辑，Composition API希望将通过当前组件属性、可用的机制公开为JavaScript函数来解决这个问题。Vue核心团队将组件Composition API描述为“一套附加的、基于函数的api，允许灵活地组合组件逻辑”。使用Composition API编写的代码更易读，并且场景不复杂，这使得阅读和学习变得更容易

Options API和Composition-API的区别

Options API

在vue2中，我们会在一个vue文件中定义methods，computed，watch，data中等等属性和方法，共同处理页面逻辑,我们称这种方式为Options API

优缺点

• 一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散，项目小还好，清晰明了，但是项目大了后，一个methods中可能包含很多个方法，你往往分不清哪个方法对应着哪个功能
• 条例清晰,相同的放在相同的地方;但随着组件功能的增大,关联性会大大降低,组件的阅读和理解难度会增加;

Composition-API

为了解决在vue2中出现的问题,在vue3 Composition API 中，我们的代码是根据逻辑功能来组织的，一个功能所定义的所有api会放在一起（更加的高内聚，低耦合这样做，即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有API

Composition-API将每个功能模块所定义的所有的API都放在一个模块,这就解决了Vue2中因为模块分散而造成的问题

Composition API 是根据逻辑相关性组织代码的，提高可读性和可维护性

基于函数组合的 API 更好的重用逻辑代码（在vue2 Options API中通过Mixins重用逻辑代码，容易发生命名冲突且关系不清）

API介绍

Setup函数

官网 setup组件使用

参数

使用setup 函数时，它将接受两个参数：props,context

props:父组件传递给子组件的数据,之前我在vue2的文章中有提到过，有兴趣的同学可以自己看看我之前的文章
context: 包含三个属性attrs, slots, emit

（1）attrs：所有的非prop的attribute；

（2）slots：父组件传递过来的插槽

（3）emit：当我们组件内部需要发出事件时会用到emit

props: {
   
    message: {
   
        type: String,
        required: true
        default:'长夜将至'
    }
},
setup(props，context) {
   
    // Attribute (非响应式对象)
    console.log(context.attrs)
    // 插槽 (非响应式对象)
    console.log(context.slots)