【vue3|第4期】Vue3的选项式与组合式

日期：2024年5月30日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

---

---

---

一、前言

Vue3，当前前端开发的热门框架，为开发者带来了两种组件编写方式：选项式API 和 组合式API。这些不同的编写方式源于 Vue 的演进，却也带来了困惑，尤其是对新手来说。本文的目标是澄清这些混淆，详细解释两种 API 的关联、差异以及它们各自的适用场景和优势。

二、 选项式（Options API）

选项式API是Vue2中广为人知的方式，它通过预定义的选项如data、methods、computed等来组织代码。每个选项负责组件的不同方面，这样可以让代码结构清晰，易于理解和维护。

（2-1）示例

<template><div><button @click="increment">Increment</button><p>Count: {{ count }}</p></div>
</template><script>
export default {data() {return {count: 0};},methods: {increment() {this.count++;}}
};
</script>

解析与说明：

1. <template>： 这是Vue模板的部分，它定义了组件的HTML结构。在这个例子中，我们有一个按钮和一个段落（<p>标签），按钮用来增加计数，段落用来显示当前计数。
2. <script>： 这是Vue组件的脚本部分，它使用JavaScript编写。在这个例子中，我们导出了一个默认的Vue组件对象。
3. export default {...}： 这是使用Vue 3的export default语法来定义一个组件。在这个对象中，我们定义了组件的属性和方法。
4. data() {...}： data函数返回一个对象，这个对象包含了组件的响应式数据。在这个例子中，我们定义了一个名为count的属性，它的初始值是0。
5. methods: {...}： methods对象包含了组件的方法。在这个例子中，我们定义了一个名为increment的方法，当按钮被点击时，它会增加count的值。
6. @click指令： 这是Vue的一个自定义指令，用来绑定事件监听器。在这个例子中，当按钮被点击时，increment方法会被调用。
7. {{ count }}： 这些是Vue的插值表达式，它们用来将数据绑定到模板字符串中。当count属性改变时，插值表达式所在的位置也会相应更新。

（2-2）选项式的优点

1. 易于理解和上手：对于新手来说，选项式API的结构更加直观，容易理解。
2. 代码组织结构清晰：不同的选项负责不同的功能，使得代码结构清晰，易于阅读和维护。
3. 兼容性：对于Vue2迁移到Vue3的项目，可以更方便地逐步迁移。

（2-3）选项式的缺点

1. 逻辑分散：同一个功能逻辑可能会分散在不同的选项中，导致代码分散，不易维护。
2. 代码冗余：对于有多个组件共享相同逻辑的情况，需要重复编写相同的代码，导致代码冗余。
3. 类型支持不友好：对于TypeScript用户来说，选项式API的类型支持不如组合式API。

三、 组合式（Composition API）

组合式API是Vue3引入的一种新的编写方式，它通过setup函数将组件的逻辑组织在一起。这样可以将相关的逻辑放在一起，避免了选项式API中的逻辑分散问题。

（3-1）示例

组合式分两种：

1、组合式 + setup()函数式 ；
2、组合式 + setup语法糖式（即 <script setup>模式 ）。

（3-1-1）组合式 + setup()函数式

<template><div><button @click="increment">Increment</button><p>Count: {{ count }}</p></div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {setup() {// 使用ref函数创建一个响应式引用，相当于Vue 2中的data属性const count = ref(0);// 使用一个方法来更新count的值function increment() {count.value++;}// 使用onMounted生命周期钩子来处理组件挂载后的逻辑onMounted(() => {console.log('Component is mounted!');});// 返回在模板中需要使用的数据和方法return {count,increment};}
};
</script>

解析与说明：

1. import { ref, onMounted } from 'vue'： 这行代码从Vue 3的vue包中导入了ref和onMounted两个函数。ref用于创建响应式引用，onMounted是一个生命周期钩子，它在组件挂载后执行。
2. export default {...}： 仍然使用export default来定义组件。
3. setup()函数： 这是Vue 3中引入的新函数，它是组合式API的入口。在setup()函数中，你可以定义响应式变量、计算属性、侦听器等。
4. const count = ref(0)： 使用ref函数创建了一个响应式引用，它相当于Vue 2中的data属性。count现在是响应式的，当它在组件内部改变时，界面上的插值表达式会自动更新。
5. function increment() {...}： 定义了一个方法来更新count的值。
6. onMounted(() => {...})： 使用onMounted生命周期钩子来处理组件挂载后的逻辑，例如在控制台打印消息。
7. 返回对象： setup()函数返回一个对象，其中包含了在模板中需要使用的数据和方法。这些数据和方法可以通过this在模板中访问，但在setup()函数内部，你不需要使用this来引用它们。

（3-1-2）组合式 + setup语法糖式

<template><div><button @click="increment">Increment</button><p>Count: {{ count }}</p></div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
// 响应式变量
const count = ref(0);
// 方法
function increment() {count.value++;
}
// 生命周期钩子
onMounted(() => {console.log('Component is mounted!');
});
</script>

解析与说明：

1. <script setup>标签： 这是Vue 3引入的新标签，用于定义组合式API的脚本部分。在这个标签内部，你可以使用import、const、function等JavaScript语法来定义组件的响应式状态和方法。
2. import { ref, onMounted } from 'vue'： 这行代码从Vue 3的vue包中导入了ref和onMounted两个函数。
3. const count = ref(0)： 使用ref函数创建了一个响应式引用，相当于选项式API中的data属性。
4. function increment() {...}： 定义了一个方法来更新count的值。
5. onMounted(() => {...})： 使用onMounted生命周期钩子来处理组件挂载后的逻辑。
6. 返回对象： 在<script setup>模式中，你不需要显式返回响应式数据和方法，因为它们可以直接在模板中使用。

（3-2）组合式的优点

1. 逻辑集中：通过setup函数，可以将组件的所有逻辑放在一起，使得代码更加集中，易于维护。
2. 更好的类型支持：对于TypeScript用户来说，组合式API提供了更好的类型支持。
3. 代码复用：通过自定义函数或钩子，可以方便地实现代码复用。

（3-3）组合式的缺点

1. 学习成本：对于新手来说，组合式API可能需要一定的时间来适应。
2. 重构成本：对于已有的项目，如果采用选项式API，那么重构为组合式API可能需要一定的成本。

四、总结

Vue3的选项式API和组合式API各有优缺点，开发者可以根据自己的需求选择合适的方式。

对于新手或小型项目，选项式API可能更适合；而对于大型项目或需要更好的类型支持的项目，组合式API可能是更好的选择。同时，组合式API的两种写法也为我们提供了更多的选择，可以根据项目需求灵活运用。

在未来的发展趋势中，组合式API可能会越来越受到开发者的青睐，因为它提供了更高的灵活性和更好的类型支持。但无论如何，Vue3为我们提供了两种方式，让我们可以根据项目需求灵活选择，这也是Vue3如此受欢迎的原因之一。

---

参考文章：

• Vue.js

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/139321504