【Vue3】4个比较重要的设计模式！！_vue3 设计模式-优快云博客

本文链接：https://blog.youkuaiyun.com/SWQ4520/article/details/140459115

大家好，我是CodeQi！ 一位热衷于技术分享的码仔。

在我投身于前端开发的职业生涯期间，曾有一次承接了一个大型项目的维护工作。此项目运用的是 Vue 框架，然而其代码结构紊乱不堪，可维护性极度糟糕😫。

这使我深刻领会到，理解并运用 Vue 中的重要设计模式是何等关键！

由此，我开启了对 Vue 设计模式的深度研究之旅，期望能够提升自身的开发水准，让代码更具优雅性、高效性以及良好的可维护性💪。

所以，今天给大佬们分享我认为4个vue中比较重要的设计模式！

一、组件化设计模式

组件化是 Vue 框架的核心思想之一。在 Vue 中，我们将页面拆分成一个个独立的组件，每个组件都有自己的模板、逻辑和样式。这种设计模式使得代码的复用性大大提高，同时也方便了团队协作和代码维护📦。

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义组件的数据
const title = ref('这是组件的标题');
const content = ref('这是组件的内容');

console.log('组件数据初始化完成');
</script>

<style scoped>
h2 {
  color: blue;
}
p {
  font-size: 16px;
}
</style>

组件化的优点：

1. 提高代码的复用性，减少重复代码的编写。
2. 增强代码的可维护性，每个组件的逻辑相对独立，便于修改和调试。
3. 提升开发效率，能够快速搭建复杂的页面结构。

二、单向数据流设计模式

在 Vue 中，数据的流动通常是单向的，即从父组件流向子组件。父组件通过属性将数据传递给子组件，子组件不能直接修改父组件传递的数据，而是通过触发事件通知父组件进行修改📣。

<template>
  <child-component :data="parentData" @updateData="updateParentData" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 父组件的数据
const parentData = ref({ name: '张三', age: 20 });

// 处理子组件触发的更新数据事件
function updateParentData(newData) {
  parentData.value = newData;
  console.log('父组件数据更新完成');
}
</script>

单向数据流的优点：

1. 保证数据的一致性和可预测性，避免数据的混乱修改。
2. 使得组件之间的关系更加清晰，易于理解和维护。

三、观察者模式

Vue 中的响应式系统就是基于观察者模式实现的。当数据发生变化时，Vue 会自动通知依赖该数据的组件进行更新👀。

const data = reactive({ count: 0 });

// 依赖数据的计算属性
const doubleCount = computed(() => data.count * 2);

watchEffect(() => {
  console.log(`当前计数: ${data.count}, 双倍计数: ${doubleCount.value}`);
});

data.count++;

观察者模式的优点：

1. 实现了数据和视图的自动同步，减少了手动操作的繁琐。
2. 提高了应用的性能，只更新需要更新的部分。

四、发布-订阅模式

在 Vue 中，我们可以使用事件总线来实现发布-订阅模式，用于组件之间的非父子通信📨。

// 创建事件总线
const eventBus = new Vue();

// 组件 A 发布事件
function componentAPublish() {
  eventBus.$emit('customEvent', { message: '来自组件 A 的消息' });
  console.log('组件 A 发布事件');
}

// 组件 B 订阅事件
eventBus.$on('customEvent', (data) => {
  console.log(`组件 B 接收到事件: ${data.message}`);
});

发布-订阅模式的优点：