当前位置：首页 > news >正文

【vue for beginner】Composition API 和 Options API 的区别

news 2025/7/27 20:49:13

挪威特罗姆瑟夜景

🌈Don’t worry , just coding!
内耗与overthinking只会削弱你的精力，虚度你的光阴，每天迈出一小步，回头时发现已经走了很远。

📗概念

vue2中的方式叫Options API ，vue3中叫Composition API。
Composition API是大势所趋，但是也不代表Options API 就不好，只是前端发展到一定的程度，之前的Options API写法是一个痛点，每次修改对应的功能需要在文件中依次找到data、methods去修改，效率很低，所以出现了Composition API。

Option API图解

在这里插入图片描述

Compostion API图解

在这里插入图片描述

💻代码结构

Options API

┌─────────────────────────┐
│ Vue Component │
├─────────────────────────┤
│ data() │
│ ┌─────────────────────┐ │
│ │ { │ │
│ │ message: │ │
│ │ count: 0 │ │
│ │ } │ │
│ └─────────────────────┘ │
├─────────────────────────┤
│ methods │
│ ┌─────────────────────┐ │
│ │ { │ │
│ │ increment() │ │
│ │ } │ │
│ └─────────────────────┘ │
├─────────────────────────┤
│ computed │
│ ┌─────────────────────┐ │
│ │ { │ │
│ │ computedValue │ │
│ │ } │ │
│ └─────────────────────┘ │
└─────────────────────────┘

Composition API

┌─────────────────────────┐
│ Vue Component │
├─────────────────────────┤
│ setup() │
│ ┌─────────────────────┐ │
│ │ const message = │ │
│ │ ref(“Hello, Vue!”)││
│ └─────────────────────┘ │
│ ┌─────────────────────┐ │
│ │ const count = │ │
│ │ ref(0) │ │
│ └─────────────────────┘ │
│ ┌─────────────────────┐ │
│ │ const increment = │ │
│ │ () => { │ │
│ │ count.value++; │ │
│ │ } │ │
│ └─────────────────────┘ │
├─────────────────────────┤
│ return │
│ ┌─────────────────────┐ │
│ │ { │ │
│ │ message, │ │
│ │ increment │ │
│ │ } │ │
│ └─────────────────────┘ │
└─────────────────────────┘

🔍理解

只要看到data、methods、computed就是vue2的写法
只要看到setup就是vue3的写法
项目里有人可能会2种方法混用，别慌，看到哪个关键字就按照哪个逻辑分析
非特殊情况，不要写vue2的代码了，迟早要被过度到vue3

Composition API 和 Options API 的区别

定义方式

Options API: 使用对象选项定义组件的各个部分。
Composition API: 使用函数来组织逻辑，更加灵活。

逻辑组织

Options API: 逻辑通常分散在 data, methods, computed 等选项中。
Composition API: 逻辑可以集中在一个函数中，便于复用和维护。

示例对比

Options API 示例

<template><div><h1>{{ message }}</h1><button @click="increment">增加</button></div>
</template><script>
export default {data() {return {message: "Hello, Vue!",count: 0,};},methods: {increment() {this.count++;this.message = `你点击了 ${this.count} 次`;},},
};
</script>

Composition API 示例

<template><div><h1>{{ message }}</h1><button @click="increment">增加</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const message = ref("Hello, Vue!");const count = ref(0);const increment = () => {count.value++;message.value = `你点击了 ${count.value} 次`;};return {message,increment,};},
};
</script>