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

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

文章目录

一、前言
二、选项式（Options API）
- （2-1）示例
- （2-2）选项式的优点
- （2-3）选项式的缺点
三、组合式（Composition API）
- （3-1）示例
- - （3-1-1）组合式 + setup()函数式
  - （3-1-2）组合式 + setup语法糖式
- （3-2）组合式的优点
- （3-3）组合式的缺点
四、总结

在这里插入图片描述

一、前言

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>

解析与说明：

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

（2-2）选项式的优点

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

（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>

解析与说明：

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

解析与说明：

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