Vue中Composition API和Options API之间的区别DZone>Web Dev Zone>Vue中C

Vue中Composition API和Options API之间的区别

让我们来看看在Vue中创建组件的两种主要方式

直到Vue 2，有一种方法可以在Vue中创建组件。在Vue 3中，引入了一种新的方法，叫做Composition API。现在，如果我们想在Vue中制作一个组件，我们有两种方法可以做到。你可能想知道到底有什么区别，所以让我们看看较新的Composition API与Vue 2的方法有什么不同，后者现在被称为Options API。

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

简短的答案是语法。 Composition API让我们可以创建组件，而不需要像Options API那样有一个大的可导出对象。例如，如果我们想用Options API制作一个简单的计数器组件，它看起来就像下面的代码。

选项API

Vue.js组件

<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

Vue.js组件

<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要精简得多，需要的代码也少得多。它还有一个额外的好处，那就是将代码分割开来。让我们考虑一个有两个计数器的愚蠢的例子--一个按钮使输出增加1，另一个增加2。在Options API中，我们可以这样写。

Vue.js组件

<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中，它可能看起来像这样。

Vue.js Component

<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的其他好处

取代了mixins，以及与之相伴的所有问题，如名称冲突。
更好的类型支持，因为它使用大多数正常的函数和变量，TypeScript中不需要复杂的类型。
更小的文件- 如前所述，Composition API需要更少的代码。

我现在需要使用Composition API吗？

不如果Options API仍能正常工作，就没有理由将你的代码切换到Composition API。Options API不会消失，相反，Composition API提供了一种创建Vue组件的替代方法。

在某些情况下，Options API可能仍然是你更好的选择（双关语并非有意）。

合成API比选项API好吗？

这个问题没有简单的答案。两种方法都有它们的优点，在某些情况下它们可能是有用的。无论你决定用什么方法，都是完全可以的，但组合API确实解决了选项API带来的一些问题。

API

经Johnny Simpson, DZone MVB许可发表于DZone。点击这里查看原文。

DZone贡献者所表达的观点属于他们自己。