Vue中Composition API和Options API的区别

Vue小助理

253人浏览 · 2022-08-14 21:47:46

Vue小助理 · 2022-08-14 21:47:46 发布

在 Vue 2 之前,有一种方法可以在 Vue 中创建组件。在 Vue 3 中,引入了一种称为 Composition API 的新方法。现在,如果我们想在 Vue 中制作一个组件,我们有两种方法可以做到。您可能想知道到底有什么区别,所以让我们看看新的 Composition API 与 Vue 2 方法(现在称为 Options API)有何不同

Vue中的Composition和Options API有什么区别?

简短的回答是语法。组合 API 允许我们创建组件,而无需像选项 API 中那样的大型单个可导出对象。例如,如果我们想用 Options API 制作一个简单的计数器组件,它看起来像下面的代码。

选项 API

<template>
    <h1>{{ counter }}</h1>
    <button @click="incrCounter">Click Me</button>
</template>
<script>
export default {
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        incrCounter: function() {
            this.counter += 1;
        }
    }
}
</script>

进入全屏模式退出全屏模式

相反,如果我们想用 Composition API 编写相同的代码,它应该是这样的。

组合API

<template>
    <h1>{{ counter }}</h1>
    <button @click="incrCounter">Click Me</button>
</template>
<script setup>
    import { ref } from 'vue'

    let counter = ref(0);

    const incrCounter = function() {
        counter.value += 1;
    }
</script>

进入全屏模式退出全屏模式

您会注意到一些不同之处:

我们导入了一个叫做ref的东西——这让我们可以创建反应变量
当我们增加计数器时,我们实际上增加了counter.value,因为ref返回一个对象。
我们避免使用整个原型,而是只使用一个incrCounter函数

组合 API 中的反应性

除了ref,我们还可以将reactive用于对象。这两者都赋予变量反应能力,这意味着我们不会失去任何功能。

组合 API 的好处

如您所见,组合 API 比选项 API 更加精简,并且需要的代码也少很多。它还具有 compartmentalizing 代码的额外好处。让我们考虑一个带有两个计数器的愚蠢示例 - 一个按钮将输出增加 1,另一个按钮增加 2。在 Options API 中,我们可以这样写:

<template>
    <h1>{{ counter }}, {{ doubleCounter }} </h1>
    <button @click="incrCounter">Click Me</button>
    <button @click="increaseByTwo">Click Me For 2</button>
</template>
<script>
export default {
    data() {
        return {
            counter: 0,
            doubleCounter: 0 
        }
    },
    methods: {
        incrCounter: function() {
            this.counter += 1;
        },
        increaseByTwo: function() {
            this.doubleCounter += 2;
        }
    }
}
</script>

进入全屏模式退出全屏模式

另一方面,在 Components API 中,它可能如下所示:

<template>
    <h1>{{ counter }}, {{ doubleCounter }} </h1>
    <button @click="incrCounter">Click Me</button>
    <button @click="increaseByTwo">Click Me For 2</button>
</template>

<script setup>
    import { ref } from 'vue'

    let counter = ref(0);
    const incrCounter = function() {
        counter.value += 1;
    }

    let doubleCounter = ref(0);
    const increaseByTwo = function() {
        doubleCounter.value += 2;
    }
</script>

进入全屏模式退出全屏模式

差别很小,但您可能会注意到一些有趣的事情 - 在 Composition API 上,所有相关代码都紧密相连,因此您不必抱太大希望。在下图中,您可以看到具有相似功能的代码以相同的颜色突出显示。

在右侧,Composition API 将其代码全部保存在同一个位置。在小型项目上,这并没有太大的区别——但在大型项目上,可维护性会提高。

[ 组合 API 与选项 API ](https://res.cloudinary.com/practicaldev/image/fetch/s--KzgsE3Yl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to-uploads.s3.amazonaws.com/uploads/articles/mriitco6qwevekq393ln.png)