🍭 Hello，这里是爱吃糖的范同学
🔴 想把自己学习技术的经历和一些总结分享给大家！
🔴 通过这样的方式记录自己成长，同时沉淀自己的技术，我会把所有额外的时间和经历投放到优快云和公众号（💥公号名：AIRC Team💥，欢迎关注，为大家准备了很多有关编程学习资料）文章的撰写。
🔴 希望能通过这样的方式让大家认识我，和我一起学习编程，共同进步！😃
希望能和大家一起进步和成长！坚持热爱！🎉🎉🎉
目录
✏️ 写在前面：
一个良好的代码风格能有效的减少Bug出现概率，提高开发效率，提升系统可维护性 ~
刚开始学习 Vue 时我个人认为使用 选项式 API 在代码结构上会更加清晰明了，不太明白官方在 Vue3 时替换掉了这种方式，而是选用了组合式 API 的代码风格。随着后续的不断学习和开发，逐渐理解使用 组合式 API 的优势。
基于此背景下，于是针对这两种不同风格的 Vue 组件开发代码风格进行了分析梳理和总结，当然，要说推荐使用那肯定是根据官方的迭代进行使用 组合式 API。（PS：人家是官方的专业团队，那必须没有问题 ~ 😎）
接下来让我们详细看看选项式 API & 组合式 API的对比分析！！！😎
✏️ 选项式 API：
在Vue2之前，我们主要使用的是选项式API（Options API）。这种API的设计方式是基于对象的，我们将一个Vue实例的各个部分拆分成不同的选项，如data、methods、computed、watch等，并在创建Vue实例时将它们作为选项传入。
选项式API的优点在于其结构清晰、易于理解和上手。每个选项都有其明确的职责，开发者只需关注自己需要实现的功能，而无需过多关心Vue内部的运行机制。这种开发方式对于小型到中型的应用来说是非常高效的。
然而，随着应用规模的扩大和复杂度的增加，选项式API也暴露出了一些问题。当组件的逻辑变得复杂时，代码会变得难以维护和理解。由于数据和逻辑被分散在多个选项中，很难一眼看出它们之间的关系。此外，对于复用逻辑代码也存在一定的困难，因为逻辑代码往往与特定的data和methods紧密耦合。
<template>
<div class="home" v-if="userInfo">
<my-header/>
用户详情：{
{fullUname}},{
{userInfo.age}}岁
</div>
</template>
<script>
import MyHeader from '../components/my-header.vue';
export default {
// 组件：公共头部
components: { MyHeader },
// 属性： 接受属性用户id
props: {
userId: {
type: String,
default: '2022-01-01'
}
},
// 状态：用户信息
data() {
return {
userInfo: null
}
},
// 计算属性：给用户名加一个牛逼的前缀
computed: {
fullUname() {
if(this.userInfo && this.userInfo.name){
return '菜菜的' + this.userInfo.name;
}
return ''
}
},
// 监听：用户id改变
watch: {
userId: {
handler(newVal, oldVal) {
console.log('用户id变化啦:'+newVal);
},
immediate: true
}
},
// 方法：同步用户信息
methods: {
syncUserInfo(userId) {
this.userInfo = {
id: userId,
name: '小明',
age: 20
};
}
},
// 钩子：初始化
mounted() {
this.syncUserInfo(this.userId)
}
}
</script>
（PS：个人的看法是这样代码的分类很明确，属性、方法、监听器等等分别在固定的位置下进行定义。但是也存在同一业务场景所使用的属性，方法等被分散在了不同区域，不便于维护的问题💢💢💢）
✏️ 组合式 API：
1.组合式 API 概述：
为了解决选项式API在复杂应用中的局限性，Vue3引入了组合式API。组合式API是一种基于函数的API，它允许开发者将组件的逻辑代码拆分成多个独立的函数，每个函数负责处理特定的功能或逻辑。
组合式API的核心思想是“组合”，即将复杂的组件逻辑拆分成小的、可复用的函数单元。这些函数单元可以独立测试、独立复用，并且可以灵活地组合在一起以构建复杂的组件逻辑。
使用组合式API的好处是显而易见的。首先，它提高了代码的可读性和可维护性。通过将逻辑代码拆分成独立的函数，我们可以更容易地理解和跟踪代码的执行流程。其次，它提高了代码的复用性。我们可以将通用的逻辑代码封装成可复用的函数，并在多个组件中共享这些函数。最后，它使得代码的组织更加灵活。我们可以根据需要自由地组合和拆分逻辑代码，以适应不同的应用场景。
Vue3 组合式 API（Composition API） 主要用于在大型组件中提高代码逻辑的可复用性。传统的组件随着业务复杂度越来越高，代码量会不断的加大，整个代码逻辑都不易阅读和理解。
Vue3 使用组合式 API 的地方为 setup。
在 setup 中，我们可以按逻辑关注点对部分代码进行分组，然后提取逻辑片段并与其他组件共享代码。因此，组合式 API（Composition API） 允许我们编写更有条理的代码。
2.组合式 API 编写：
组合式API的核心思想是将组件的逻辑代码拆分成小的、独立的函数单元，这些函数可以被看作是“组合函数”。每个组合函数都封装了特定的功能或逻辑，并且可以独立地进行测试、复用和组合。这种开发方式不仅提高了代码的可读性和可维护性，还使得代码的组织更加灵活和模块化。
2.1 创建响应式状态（属性）
在Vue3中，我们可以使用ref和reactive函数来创建响应式状态。ref用于处理基本数据类型，而reactive则用于处理对象和数组。这些函数返回的值是响应式的，当状态发生变化时，Vue会自动更新相关的DOM元素。
import { ref, reactive } from 'vue';
export default {
setup() {
const count = ref(0);
const state = reactive({ name: 'Vue3', version: '3.x' });
// ... 其他逻辑代码
return { count, state };
},
};2.2 方法：
在组合式API中，我们可以直接在setup函数内部定义方法，并将它们作为响应式对象的一部分返回。这样，我们就可以在模板中直接使用这些方法了。
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const increment = () => { count.value++; };
// ... 其他逻辑代码
return { count, increment };
},
};2.3 计算属性和侦听器：
组合式API提供了computed和watch函数来处理计算属性和侦听器。computed函数用于创建计算属性，它可以根据依赖的状态动态计算出一个新的值。而watch函数则用于监听状态的变化，并在状态发生变化时执行相应的回调函数。
import { ref, computed, watch } from 'vue';
export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
watch(count, (newVal, oldVal) => {
console.log(`Count changed from ${oldVal} to ${newVal}`);
});
// ... 其他逻辑代码
return { count, doubleCount };
},
};2.4 生命周期函数：
组合式API提供了与选项式API中相同的生命周期钩子函数，
最低0.47元/天 解锁文章
扫一扫
3836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
