Vue设计模式到底多少种？

Vue设计模式到底多少种？

很多同学问，Vue到底有多少种设计模式？？各个模式到底是什么意思？？又各自适合什么场景？？

这里我给大家直接说下，Vue的设计模式没有一个固定的数值，设计模式是解决特定问题的经验总结，并非固定清单。不同技术场景、项目复杂度会衍生出不同的模式组合。

那么在这里我给大家总结了9种常用，或者面试过程中经常被提记的设计模式；

一、单例模式：全局状态管理

模式解释

标准解释：
单例模式确保一个类只有一个实例，并提供一个全局访问点。在Vue中常用于全局状态管理，保证应用状态的可控性和一致性。

无脑解释：
单例模式就像是一个全村唯一的广播站” “模式。想象一下，在一个小村子里，只有一个广播站能够发送消息，而且全村的人都能通过这个广播站接收到消息。这个广播站就是单例模式中的那个唯一实例，它提供了全村人访问和获取信息的全局访问点。

在Vue中，如果我们用单例模式来管理全局状态，就像是这个广播站负责播报村子里的各种重要事情，比如天气变化、节日活动安排等。这样，村子里的每个人（即Vue应用的各个组件）都能通过这个广播站（即单例模式的全局访问点）了解到最新的状态，而且保证了这个状态在全村（即整个Vue应用）中是一致的和可控的。

使用场景

• 用户登录状态管理
• 全局配置信息存储
• 应用主题切换控制
• 跨组件数据共享

代码示例（Vuex）

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});
 
// 在组件中使用
<template>
  <div>{{ count }}</div>
  <button @click="increment">Increment</button>
</template>
 
<script>
import { mapState, mapActions } from 'vuex';
 
export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
};
</script>

二、函数式组件

模式解释

无状态、无实例的组件实现方式，通过纯函数渲染视图，它们仅依赖于传入的props来渲染内容, 具有更高的渲染性能和更简洁的代码结构。

使用场景

• 静态展示型组件
• 高阶组件（HOC）
• 性能敏感型列表项
• 工具类展示组件

代码示例

// FunctionalComponent.vue
<template functional>
  <div>{{ props.message }}</div>
</template>

<script>
export default {
  functional: true,
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

// 在父组件中使用
<template>
  <FunctionalComponent message="Hello, World!" />
</template>

<script>
import FunctionalComponent from './FunctionalComponent.vue';

export default {
  components: {
    FunctionalComponent
  }
};
</script>

三、组合模式：逻辑复用

模式解释

组合模式简单解释就是：一个页面比较复杂，需要好几个组件组合形成这个页面；
即：组合模式允许你将对象组合成树形结构来表现“整体/部分”的层次结构。在Vue中，这通常通过组件的嵌套和组合来实现。

使用场景

• 复杂业务逻辑封装
• 跨组件功能复用
• 第三方库集成
• 表单验证逻辑

当你需要构建一个复杂的UI界面，且这个界面可以由多个小组件组合而成时，组合模式是一个有效的选择。

代码示例（组合式函数）

// ParentComponent.vue
<template>
  <div>
    <ChildComponent1 />
    <ChildComponent2 />
  </div>
</template>

<script>
import ChildComponent1 from './ChildComponent1.vue';
import ChildComponent2 from './ChildComponent2.vue';

export default {
  components: {
    ChildComponent1,
    ChildComponent2
  }
};
</script>

四、策略模式：行为扩展

模式解释

策略模式通过定义算法家族并使其可互相替换，实现行为的灵活扩展。在Vue中常用于解耦具体算法实现与业务逻辑。

使用场景

• 表单验证规则管理
• 权限验证策略
• 数据处理策略（如不同格式转换）
• 支付方式选择

代码示例（表单验证策略）

// strategies.js
export const validationStrategies = {
  required: value => !!value?.trim(),
  email: value => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
  minLength: (value, length) => value.length >= parseInt(length)
}

// 使用组合式函数封装
export function useValidator() {
  const validate = (value, rules) => {
    return rules.every(rule => {
      const [strategy, param] = rule.split(':')
      return validationStrategies[strategy](value, param)
    })
  }

  return { validate }
}

// 组件中使用
import { useValidator } from './validator'
export default {
  setup() {
    const { validate } = useValidator()
    
    const checkForm = () => {
      const isValid = validate(formData.email, ['required', 'email'])
      // ...
    }
    
    return { checkForm }
  }
}

五、观察者模式：响应式数据

模式解释

观察者模式定义对象间的一对多依赖关系，当被观察对象状态改变时自动通知所有依赖项。Vue的响应式系统正是该模式的典型实现。

使用场景

• 表单输入双向绑定
• 跨组件状态同步
• 实时数据仪表盘
• 复杂计算依赖跟踪

代码示例（自定义观察者）

// reactive.js
class Dep {
  constructor() {
    this.subscribers = new Set()
  }

  depend() {
    if (activeEffect) this.subscribers.add(activeEffect)
  }

  notify() {
    this.subscribers.forEach(effect => effect())
  }
}

let activeEffect = null

function watchEffect(effect) {
  activeEffect = effect
  effect()
  activeEffect = null
}

// Vue3响应式原理简化实现
function reactive(obj) {
  const deps = new Map()

  return new Proxy(obj, {
    get(target, key) {
      let dep = deps.get(key)
      if (!dep) {
        dep = new Dep()
        deps.set(key, dep)
      }
      dep.depend()
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      deps.get(key)?.notify()
      return true
    }
  })
}

// 使用示例
const state = reactive({ count: 0 })

watchEffect(() => {
  console.log(`Count changed: ${state.count}`)
})

state.count++ // 触发日志输出

六、装饰者模式：动态添加功能

模式解释

装饰者模式通过包装对象来动态扩展功能，同时保持接口一致性。在Vue中常用于功能增强而不修改组件本身。

使用场景

• 权限控制装饰器
• 日志记录装饰器
• 性能监控装饰器
• UI样式增强

代码示例（高阶组件装饰器）

// withLogger.js
export default function withLogger(WrappedComponent) {
  return {
    mounted() {
      console.log(`Component ${this.$options.name} mounted`)
    },
    render(h) {
      return h(WrappedComponent, {
        on: {
          ...this.$listeners,
          click: (...args) => {
            console.log('Button clicked')
            this.$emit('click', ...args)
          }
        },
        props: this.$props
      })
    }
  }
}

// 使用装饰器
import Button from './Button.vue'
import withLogger from './withLogger'

export default withLogger(Button)

七、工厂模式：对象创建

模式解释

工厂模式将对象创建过程封装，根据输入参数返回不同类型对象。在Vue中常用于动态组件创建和复杂对象实例化。

使用场景

• 动态表单组件生成
• 多主题组件切换
• 插件系统初始化
• 异步组件加载

代码示例（组件工厂）

// componentFactory.js
const components = {
  text: () => import('./TextInput.vue'),
  select: () => import('./SelectInput.vue'),
  date: () => import('./DatePicker.vue')
}

export default {
  createComponent(type) {
    return components[type]?.() || components.text()
  }
}

// 动态组件使用
<template>
  <component :is="currentComponent" />
</template>

<script>
import componentFactory from './componentFactory'

export default {
  data() {
    return {
      fieldType: 'select'
    }
  },
  computed: {
    currentComponent() {
      return componentFactory.createComponent(this.fieldType)
    }
  }
}
</script>

八、代理模式：控制访问

模式解释

代理模式为对象提供替代品或占位符以控制其访问。Vue中常用于数据校验、缓存控制和访问限制。

使用场景

• 计算属性缓存
• API请求拦截
• 权限控制代理
• 延迟加载优化

代码示例（缓存代理）

// apiProxy.js
const cache = new Map()

export default {
  async fetchData(url) {
    if (cache.has(url)) {
      console.log('Return cached data')
      return cache.get(url)
    }
    
    const response = await fetch(url)
    const data = await response.json()
    cache.set(url, data)
    
    return data
  }
}

// 使用代理
import apiProxy from './apiProxy'

export default {
  async mounted() {
    const data = await apiProxy.fetchData('/api/users')
    // ...
  }
}

九、迭代器模式：顺序访问

模式解释

迭代器模式提供顺序访问聚合对象元素的方法，而无需暴露其底层实现。Vue中常用于处理集合型数据操作。

使用场景

• 分页数据加载
• 树形结构遍历
• 自定义集合操作
• 数据转换管道

代码示例（自定义迭代器）

// paginationIterator.js
export class PaginationIterator {
  constructor(dataSource, pageSize = 10) {
    this.dataSource = dataSource
    this.pageSize = pageSize
    this.currentPage = 0
  }

  [Symbol.iterator]() {
    return {
      next: async () => {
        const start = this.currentPage * this.pageSize
        const end = start + this.pageSize
        const data = await this.dataSource.fetch(start, end)
        
        if (data.length === 0) return { done: true }
        
        this.currentPage++
        return { value: data, done: false }
      }
    }
  }
}

// 使用示例
const iterator = new PaginationIterator(apiDataSource, 20)

for await (const page of iterator) {
  renderTable(page)
}

最后我整理一个对比表格

看到这里的小伙伴，欢迎点赞、评论，收藏！

如有前端相关疑问，博主会在第一时间解答，也同样欢迎添加博主好友，共同进步！！！