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

2,406 阅读3分钟

让我们来看看在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贡献者所表达的观点属于他们自己。