选项式API和组合式API

最新推荐文章于 2025-07-13 23:44:58 发布

原创最新推荐文章于 2025-07-13 23:44:58 发布 · 1.6k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #vue

Vue3支持选项式API和组合式API。其中，选项式API是从Vue2开始使用的一一种写法，而Vue3新增了组合式API的写法。接下来对选项式API和组合式API分别进行介绍。

1.选项式API

选项式API是一-种通过包含多个选项的对象来描述组件逻辑的API,其常用的选项包括data、methods、computed、watch等。其中，data用于定义数据，methods用于定义方法，computed用于定义计算属性，watch 用于定义侦听器。在组件的初始化阶段，Vue 内部会处理这此选项，把选项中定义的数据、方法、计算属性、侦听器等内容添加到组件实例上。当页面渲染完成后，通过this关键词可以访问组件实例。、

选项式API的语法格式如下

<script>
export default{
    data(){
        return{
            //定义数据
        }
    },
    methods:{
        //定义方法
    },
    computed:{
        //定义计算属性
    },
    watch:{
       //定义侦听器
    }
}
</script>

2.组合式API

相比于选项式API,组合式API是将组件中的数据、方法、计算属性、侦听器等代码全部组合在一起，写在setup( )函数中。组合式API的语法格式如下。

<sCrcipt>

import { computed, watch } from 'vue'

eXPport default {

    setup() {

        //定义数据

        const数据名=数据值

        //定义方法

        const方法名= ()=> {}

        //定义计算属性

        const计算属性名= computed(() => {})
    
        //定义侦听器

        watch (侦听器的来源，回调函数，可选参数)

        return {数据名，方法名，计算属性名}
    }
}
</script>

从上述语法格式可以看出，数据和方法可以直接在setup（）函数中定义，计算属性通过computed(）函数定义，侦听器通过watch(）函数定义。setup(）函数需要返回一个对象，该对象中包含数据、方法和计算属性。
Vue还提供了setup语法糖，用于简化组合式API的代码。使用setup语法糖时，组合
式API的语法格式如下。

<script setup>
   import { computed, watch } from 'vue'
    // 定义数据
    const 数据名=数据值
    //定义方法
    const 方法名=（）=>（}
    //定义计算属性
    const 计算属性名= computed((）=>{}）
    // 定义侦听器
     watch(侦听器的来源，回调函数，可选参数)
</script>

Vue提供的选项式API和组合式API这两种写法可以覆盖大部分的应用场景，它们是同一底层系统所提供的两套不同的接口。选项式API是在组合式API的基础上实现的。

企业在开发大型项目时，随着业务复杂度的增加，代码量会不断增加。如果使用选项式API，整个项目逻辑不易阅读和理解，而且查找对应功能的代码会存在一定难度。如果使用组合式API，可以将项目的每个功能的数据、方法放到一起，这样不管项目的大小，都可以快速定位到功能区域的相关代码，便于阅读和维护。同时，组合式API可以通过函数来实现高效的逻辑复用，这种形式更加自由，需要开发者有较强的代码组织能力和拆分逻辑能力。

接下来通过实际操作演示选项式API和组合式API的使用方法，具体步骤如下。

1.打开命令提示符，切换到D:vuelchapter03目录，在该目录下执行如下命令，创建项目

yarn create vite component_basis --template vue

项目创建完成后，执行如下命令进入项目目录，启动项目。

cd component _basis
yarn
yarn dev

        项目启动后，可以使用URL地址http://127.0.0.1:5173/进行访问。
        2.使用VS Code 编辑器打开D:lvuelchapter03\component_basis目录。
        3.将 srclstyle.css 文件中的样式代码全部删除，从而避免项目创建时自带的样式代码影响本案例的实现效果。
        4.创建 srclcomponents\OptionsAPl.vue 文件，用于演示选项式API的写法，在该文件中
实现单击“+1”按钮使数字加1的效果，具体代码如下。

<template>
    <div>数字：（（ number }}</div>
    <button @click="addNumber">+1</button>
</template>
<script>
export default {
    data(){
        return{ 
            number: 1
        }
    },
    methods:{
        addNumber() {
            this.number++
        }
    }
}
</script>

在上述代码中，第2行代码用于输出 number数据；第3行代码定义了“+1”按钮，绑定单击事件，单击“+1”按钮时触发addNumber(）方法；第7~11行代码定义了页面所需数据number；第13~15行代码定义了addNumber()方法，用于实现单击按钮时将number的值加1。
5.修改srclmain.js 文件，切换页面中显示的组件，具体代码如下。

import App from './components/OptionsAPI.vue'

保存上述代码后，在浏览器中访问 http://127.0.0.1:51731

6.创建srclcomponents\CompositionAPL.vue 文件，用于演示组合式API的写法，在该
文件中实现单击“+1”按钮使数字加1的效果，具体代码如下。

<template>
    <div>数字：{{ number))</div>
    <button @click="addNumber">+1</button>
1</template>
5<script setup>
6  import { ref } from 'vue'
1  let number= ref(1)
8  const addNumber =()=>{
g     number.value ++
10}
11</script>

在上述代码中，第7行代码定义了响应式数据 number；第8~10行代码定义了
aNumber(）方法，该方法实现了将 number的值加1。

7.修改srclmain.js文件，切换页面中显示的组件，具体代码如下。

import App from './components/CompositionAPI.vue'

保存上述代码后，在浏览器访问http://127.0.0.1:5173/。