VUE 3.0 Composition API到底是怎么个复合法什么是Composition API？Options APIComposition API优在哪里？？C-API组件化template里面使用非响应式数据或者外部方法

71 阅读 0 评论 47 点赞

我是靠谱客的博主甜美夏天，最近开发中收集的这篇文章主要介绍VUE 3.0 Composition API到底是怎么个复合法什么是Composition API？Options APIComposition API优在哪里？？C-API组件化template里面使用非响应式数据或者外部方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

composition [ˌkɒmpəˈzɪʃn] 这个单词是一个名词，原本是构成、创作、构成的意思。官网把Composition API翻译为组合式的API。

什么是Composition API？

创建Vue组件的意义在于可以把一些重复的页面或者逻辑提取出来，以便复用。这样不仅减少了代码量，也提高了代码的可扩展性和可维护性。Composition API一下简称C-API给我们提供了一种写组件的更高级的方法，它可以让我们轻松的把相关的业务逻辑或者业务功能封装成公用的组件，而且你终于可以把你的响应式data放在相关业务逻辑附近或者里面了。

//Options API

export default {
    data() {
        return {
            msg: 'this is options api sample'
        }
    },
    mounted() {
        this.showMsg()
    },
    methods: {
        showMsg() {
            console.log(this.msg)
        }
    }
}


// Composition API
import { ref, onMounted } from 'vue'

export default {
    setup() {
        const msg = ref('this is a ref')
        const showMsg = function() {
            console.log(msg.value)
        }
        onMounted(() => {
            showMsg
        })
        return { msg, showMsg }
        
    }
}

Options API

如果你用过Vue2.0，你可能对它的代码结构已经很熟悉了。每一个vue文件都有一连串的属性或者方法，比如：data，computed，methods，lifecycle hooks，components 等等。这些就叫做Options API。在2.0里面所有的代码是被一个一个这样的方法分割的。

使用Options API我们有两种共享代码的办法：

1、Mixins，它主要有两个问题：第一、Mixins意味着引用Mixin的组件和Mixin本身将共用一个scope，所以极有可能发生方法和属性名称重复问题。第二、如果大量使用，无法确定某个逻辑到底是组件本身的还是来自Mixin

2、Renderless Components，顾名思义就是没有template的vue组件。Renderless Components主要使用场景：如果你的好多组件逻辑基本相同，但是页面渲染差异又比较大的时候。

Composition API优在哪里？？

我们知道所有前端框架不管是vue react还是angular，他们的意义就在于让我们的代码工程化，从而让团队写作和代码分享变得更简单。这也是为啥大厂都选择react的原因，当然稳定性是一方面，更多的就是react本身就是基于组件化的核心理念来设计的，目的就是让开发者在多人协作的时候可以更加快速的去分享或者使用别人的组件，以此来提高效率。

所以vue3.0引入C-API也是的vue的写法以及业务架构上更加接近react，虽然我们要去学习和记忆更多的api，但是跟react一样，从长远来看当项目变得越来越庞大的时候，依然可以保持一定的扩展性和灵活性

C-API组件化

<template>
    <div>
        <div>
            <button @click="play"></button>
            <button @click="pause"></button>
            <button @click="goForward"></button>
        </div>
    </div>
</template>

<script>
    import { musicPlayer } from "@/components/music-player"
    export default {
        setup() {
            return {
                ...musicPlayer
            }
        }
    }
</script>

我们可以看到利用C-API我们可以把相关的业务逻辑抽离成一个或者多个独立的函数组件，而且每个组件都有自己的响应式数据，这就意味着这些组件和我们的组件消费者（父组件）是完全独立的，更像函数式编程里面的纯函数，更加复合架构设计里面『高内聚，低耦合』的设计理念。而且把响应式数据和相关业务逻辑写在一起的好处就是，使用组件的时候我只关心逻辑，删除组件的时候我也不用再费劲去对data做treeshaking了

import {ref} from '@vue/composition-api'
export const musicPlayer = () => {
    const musicSrc = ref('musicUrl')
    const play = () => {
        .....
    }
    const pause = () => {
        .....
    }
    const goForward = () => {
        ....
    }
    return {
        play,
        pause,
        goForward
    }
}

template里面使用非响应式数据或者外部方法

是想一下如果在vue2.0里面，我们想使用data意外的变量或者常量怎么操作？一个办法就是在data里面重写一遍，这就意味着我们把一个非响应式数据转换为了响应式数据，必然会带来不必要的性能消耗，当然我们也可以在生命周期里面强行和this进行绑定。不管怎样都是很非常规的操作。

利用C-API就不一样了，我们可以把外部的变量或者方法写在setup最为返回值返回就可以了。看例子

<template>
    <div>
        <div>
            <button @click="play"></button>
            <div>{{NOTICE}}</div>
        </div>
    </div>
</template>

<script>
    import { play } from '@/components/music-player'
    const NOTICE = 'this is a notice'
    export default {
        setup() {
            return {
                play,
                notice
            }
        }
    }
</script>