compositionAPI和OptionsAPI

最新推荐文章于 2024-07-27 09:00:00 发布

CQXXTXX

最新推荐文章于 2024-07-27 09:00:00 发布

阅读量628

点赞数 11

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/CQXXTXX/article/details/135171561

版权

本文比较了Vue2的OptionsAPI和Vue3的CompositionAPI在创建组件时的差异，强调了CompositionAPI的简洁语法、代码组织和类型支持优势，但指出在OptionsAPI能满足需求时，无需立即切换。

摘要由CSDN通过智能技术生成

让我们来看看在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将其代码全部放在同一个地方。在小项目中，这并没有什么大的区别--但在大项目中，可维护性会增加。