目录结构

src/

├── utils/

│   ├── test.js

│   ├── Calculator.js

├── views/

│   ├── Home.vue
├── App.vue

共同点：模块导出与模块引入

封装函数

场景

简单、轻量级和性能敏感的场景，适合快速开发和维护。

优

1. 可维护性：相关的功能和数据集中在一个单元内，使得修改和维护代码更加容易，降低了修改一处代码可能引发的连锁错误风险
2. 可读性：封装将复杂的逻辑隐藏在内部，通过清晰的接口提供简洁的使用方式，提高了代码的可读性
3. 灵活性：封装可以通过修改内部实现而不影响外部调用，为代码的扩展和修改提供了灵活性。

缺

1. 缺乏封装性：函数封装难以将相关的功能和数据组织在一起，代码的模块化程度较低。
2. 扩展性差：函数封装的代码在扩展时可能需要大量修改，不如类封装灵活。

实战

// utils-test.js
// 定义一个函数来计算两个数的和
export function addNumbers(a, b) {return a + b;
}

//home.vue
<template><h1>调用封装函数，5+3的结果：{{ result }}</h1>
</template><script setup>
import { addNumbers } from '引入路径'
import { onMounted, ref } from "vue";const result =ref(null);
onMounted(() => {console.log("组件挂载，开始执行函数");result.value=addNumbers(5, 3); //页面输出  调用封装函数，5+3的结果：8
})</script><style></style>

实战效果

封装类：

场景

高度封装、模块化和面向对象编程的场景，适合处理复杂的功能和数据。

优

1. 数据隐藏：封装类可以将类的内部数据成员设为私有，只通过公共方法进行访问和修改，实现数据的隐藏和保护。
2. 代码组织和复用：将相关的功能和数据组织在一个类中，便于代码的管理和复用。
3. 解耦和独立性：封装类使得类与外部的依赖减少，提高了类的独立性，降低了不同部分代码之间的耦合度。
4. 接口规范：封装类通过定义明确的公共接口，规范了外部与类的交互方式。

缺

1. 复杂性：学习难度也高，编写过渡抽象，代码难以理解和维护。
2. 过度设计:可能会导致代码过于复杂冗余，反而降低了可维护性。

实战

// Calculator.js
// 定义一个类来计算两个数的和
class Calculator {constructor() {// 可以在这里初始化一些属性}// 定义一个方法来计算两个数的和addNumbers(a, b) {return a + b;}
}
export default Calculator;

//home.vue
<template><h1>调用封装类，5+3的结果：{{ result }}</h1>
</template><script setup>
import Calculator from '引入路径'
import { onMounted, ref } from "vue";const result =ref(null);
onMounted(() => {const calculator = new Calculator();result.value=calculator.addNumbers(5, 3); //页面输出  调用封装类，5+3的结果：8
})</script><style></style>

实战效果