JAVA开发中Vue 3 的 Composition API 风格和 Vue 2 的 Options API 风格的区别

Vue 3 引入了 Composition API，这是一种新的编写 Vue 组件的方式，与传统的 Options API 形成对比。这两种风格各有优缺点，适用于不同的场景和开发习惯。以下是详细的比较：

Options API

Options API 是 Vue 2 中的主要编写方式，它通过对象选项（如 data, methods, computed, watch 等）来组织代码。

示例

<template><div><p>{{ message }}</p><button @click="increment">Increment</button></div>
</template><script>
export default {data() {return {count: 0,message: 'Hello, Vue!'};},methods: {increment() {this.count++;this.message = `Count is now ${this.count}`;}},computed: {doubleCount() {return this.count * 2;}},watch: {count(newVal) {console.log('Count changed to', newVal);}}
};
</script>

特点

结构清晰: 按照功能（数据、方法、计算属性等）分组。
易于上手: 对于小型项目或初学者来说更容易理解和维护。
局限性: 当组件变得复杂时，相同逻辑分散在不同选项中，难以管理和复用。

Composition API

Composition API 是 Vue 3 引入的新特性，通过组合函数来组织代码，使得逻辑更加模块化和可重用。

示例

<template><div><p>{{ message }}</p><button @click="increment">Increment</button></div>
</template><script>
import { ref, computed, watch } from 'vue';export default {setup() {const count = ref(0);const message = ref('Hello, Vue!');const increment = () => {count.value++;message.value = `Count is now ${count.value}`;};const doubleCount = computed(() => count.value * 2);watch(count, (newVal) => {console.log('Count changed to', newVal);});return {count,message,increment,doubleCount};}
};
</script>

特点

逻辑复用: 可以将相关逻辑提取到单独的函数中，便于复用。
更好的类型推断: 使用 TypeScript 时，TypeScript 能更好地推断类型。
更灵活的代码组织: 可以根据功能将代码分组，而不是按选项分组。
响应式系统增强: 提供了更多的组合函数（如 ref, reactive, computed, watch 等），增强了响应式的灵活性和强大功能。

混合使用

在实际开发中，你也可以混合使用 Options API 和 Composition API。例如，在一些简单的组件中继续使用 Options API，而在复杂的组件中使用 Composition API。

示例

<template><div><p>{{ message }}</p><button @click="increment">Increment</button></div>
</template><script>
import { ref, computed, watch } from 'vue';export default {data() {return {legacyData: 'Legacy Data'};},setup() {const count = ref(0);const message = ref('Hello, Vue!');const increment = () => {count.value++;message.value = `Count is now ${count.value}`;};const doubleCount = computed(() => count.value * 2);watch(count, (newVal) => {console.log('Count changed to', newVal);});return {count,message,increment,doubleCount};}
};
</script>