Vue中常见设计模式的应用~

Vue是基于什么模式？

表示既然是Vue中常见的设计模式，首当其冲就先聊聊MVVM模式啦

一、mvvm模式

Vue.js 是一个基于 MVVM 设计模式的前端框架。它将前端中的 UI视图 与 底层数据 和 业务逻辑 分离开来，使得UI视图与数据和业务逻辑之间不存在耦合性，可以独立编写和测试。

MVVM三个组成部分

1. Model(模型) : 存放业务数据和对数据的操作等
2. View(视图) : 用户界面，负责呈现UI，并向ViewModel传递用户交互。
3. ViewModel(视图模型) : 是视图与模型之间的桥梁，负责业务逻辑的处理与数据更新，同时通过双向数据绑定技术将数据与视图关联起来，使得数据的变化可以自动更新到视图上，视图的变化也可以自动更新到数据上。

这就是Vue响应式原理的一部分啦！
它有效地实现UI与数据分离，降低代码的耦合性，而且将业务逻辑与UI分离，方便多人协作实时开发

二、观察者模式

观察者模式也称为 发布-订阅模式 。它是一种对象间的 一对多依赖关系 。当一个对象的状态发生变化时，所有依赖于它的对象都会受到通知并自动更新。

观察者模式的三个组成部分

1. 观察者：维护一个更新接口，以便与主题对象保持联系，当主题状态发生变化时来通知观察者更新自身
2. 主题：维护观察者列表，提供了增加、删除和通知观察者的方法。
3. 具体主题：当状态发生变化时，向观察者发出通知，更新自身状态。

这个可能比较抽象，举个例子吧~
Vue中的watch 就是依赖于这个模式，在wacth中，被监听的数据充当了发布者，而执行的回调函数充当了订阅者。当数据变化时，发布者会通知所有订阅者执行回调函数，从而实现对数据变化的监听。

三、工厂模式

额…这个了解的比较少… 先提一下概念吧~

工厂模式：是一种常用的创建型设计模式，它提供了一个通用的接口来 实例化对象 ，而不用暴露对象的创建逻辑。该模式通过定义一个抽象工厂接口类来声明工厂方法，具体实现则由其 具体子类负责实现 。使用工厂模式可以让客户端在不需要知道具体类的情况下创建对象，从而提高了应用程序的灵活性、扩展性和可维护性。

工厂模式包含以下几个角色：

1. 抽象工厂类
2. 具体工厂类
3. 抽象产品类
4. 具体产品类

在Vue中，工厂模式主要用于 对象的创建和实例化 ，这个我是知道的！

在Vue中，组件是一种特殊类型的对象，通过工厂模式来创建和实例化组件。Vue组件库中的每一个组件都可以看作是一个工厂，负责根据传递的参数来实例化相应的组件对象。

在Vue中, 每个Vue实例都是通过工厂函数 Vue 来创建的，这个工厂函数实际上是 Vue 构造函数实例化的一个对象。

四、单例模式

单例模式：是一种创建型设计模式，它确保 一个类只有一个实例 ，并提供唯一的访问点，使得全局只有一个该类的对象，任何试图创建该类的新实例都会得到全局唯一的实例。

举个例子~
Vue中的状态管理，Vue中一般借助 Vuex 管理应用的状态，但是对于简单的应用来讲，使用Vuex就有点笨，这个时候就可以用到 单例模式
可以通过创建一个 Vue 实例并在其中设置全局数据来实现全局状态管理

// main.js
import Vue from 'vue';

const vm = new Vue();
Vue.prototype.$global = vm;

然后，在组件中可以使用 this.$global 访问这个全局 Vue 实例，并通过设置和读取实例数据来管理全局状态：

// some-component.vue
export default {
  mounted() {
    // 设置全局数据
    this.$global.someData = { foo: 'bar' };

    // 获取全局数据
    const data = this.$global.someData;
  }
}

其实就是将自定义的全局实例挂载在 Vue 根实例的原型上，从而实现在整个应用中任意组件都能够访问到这个全局实例

五、原型模式

再提一个单例模式，这个在js中会比较常见
它主要通过定义一个原型对象，然后在需要时通过克隆这个原型对象来创建新的对象。避免多次重复创建的对象工作。

这个一看就是构造函数new对象的场景~
将方法挂载到构造函数的原型对象上，从而使得通过构造函数创建的所有对象都能够共享这个方法

Vue中的组件其实就是根据这个模式创建的
当我们创建一个组件时，Vue.js 会将其转化为一个 Vue 实例，并将其存储在 Vue 的原型对象 Vue.prototype 上。这样，我们就可以通过 Vue 的构造函数来创建多个组件实例，而这些实例都是共享这个原型对象的。

康康代码就清楚啦~只是js中挂载的方法，vue中挂载的组件

// 1.先定义一个组件
const MyComponent = {
  template: '<div>Hello, {{ name }}!</div>',
  props: ['name']
}

// 2.将组件添加到 Vue 的原型对象中
Vue.prototype.$myComponent = MyComponent;

// 3.在父组件中使用子组件
const app = new Vue({
  el: '#app',
  data: {
    name: 'Alice'
  },
  template: '<div><my-component :name="name"/></div>'
});

// 4.还可以创建多个子组件实例
const child1 = new Vue({
  el: '#child1',
  template: '<div><my-component :name="name"/></div>'
});

const child2 = new Vue({
  el: '#child2',
  template: '<div><my-component :name="name"/></div>'
});

好像还有个装饰器模式，但是那个不了解…感兴趣的可以看看哈~
装饰器模式在vue的使用