作为一个vuer，为什么一定要知道composition-api

Why Compostion-api？

我们以前是怎么写vue的？

上面是信息，下面是表格。

options-api

import {getTableData,getInfo} from 'api/shuihu';
export default {
    data(){
        tableData:[],
        info:{
            name:'',
            organization:''
        },
        loading:false
    
    },
    created(){
        let p1=this.getTableData();
        let p2=this.getInfo();
        this.loading=true;
        Promise.all([p1,p2]).finally(()=>{
            this.loading=false;
        })
    },
    methods:{
        async getTableData(){
            const {data} = await getTableData();
            this.tableData=data;
        },
        async getInfo(){
            const {data} = await getInfo();
            this.info.name=data.name;
            this.info.organization=data.organization;
        },
    }
}
复制代码

同一个功能，放在不同的地方。当代码量一大，维护一个功能，得上下来回跳，而且很难确定是否改全。这叫业务分散。维护起来很麻烦。

composition-api

composition-api又叫组合式api，打破data和data放一起，methods和methods放一起这种组织方式，把不同的options(data、methods、computed、生命周期等)但同一个功能放一起。就像做菜一样，一道红烧肉需要大料酱油五花肉料酒放一起。当我发现味道不够咸，我再放点盐。这种组织方式，当我想维护一个功能时，直接一眼找到。因为可以注释，options-api你想注释还不好注释。

import {getTableData,getInfo} from 'api/shuihu';
import {ref,reactive} from '@vue/composition-api';
export default {
    setup(){
        //info
        const info=reactive({
            name:'',
            organization:''
        })
        const p1 = getInfo.then(({data})=>{
            info.name=data.name;
            info.organization=data.organization;
        })
    
        //table
        const tableData=ref([]);
        const p2 = getTableData().then(({data})=>{
            tableData.value=data;
        })
    
        //loading
        const loading=ref(true);
        Promise.all([p1,p2]).finally(()=>{
        loading.value=false
        })
        return {
            info,
            tableData,
            loading
        }
    }
}
复制代码

这么写是不是一目了然，获取信息，表格，loading，获取信息想加东西，直接在这里去改

options-api 与 composition-api常用语法上的不同

1. data

2. 所有的内容包在setup里面，在template使用的数据和方法需要return

使用组合式api的好处

1.按功能划分，便于维护

2.逻辑复用

我们按照功能来组织，打破options聚合在一起的方式，这就为逻辑复用提供可能。

如何封装一个逻辑函数

其实逻辑复用函数简单理解就是 有状态的函数

比函数多了状态，比组件少了视图。

useBoolean

例如这个弹窗表单，我们是不是得维护开启关闭visible这个逻辑、新增修改isAdd这个逻辑

原本我们需要这么写

data(){
    visible:false,
    isAdd:true
},
methods:{
    openDialog(){
        this.visible=true;
    },
    closeDialog(){
        this.visible=false
    },
    setAdd(){
        this.isAdd=true;
    },
    setEdit(){
        this.isAdd=false;
    }
}
复制代码

现在我们这么写

简单明了

useAsync

每次进行接口请求，是不是定义data loading快吐了

this.loading=true;
...
this.loading=false
复制代码

现在useAync内部直接帮你做，该loading展示时展示，该隐藏时隐藏，你只需要结构data和loading，挂到视图上就行

逻辑复用说白了就是封装一个响应式的函数，把会响应的data和methods丢给你，然后你去挂在视图上，该响应的时候自动响应。

总结

先不说逻辑复用不复用，options-api的写法，开发的时候有多爽，维护起来就有多惨，不信拿起一个月前自己写的500行以上的代码，都得看半天，看到颠掉。

以后开发的功能都用composition-api来写，你会感谢你自己