vue封装公共组件用到的设计模式

Vue.js 中封装公共组件通常会应用到模块化和单例设计模式：

1. **模块化** (Module Pattern): 这是一种创建私有变量和方法的方式，通过IIFE（Immediately Invoked Function Expression，立即执行函数表达式）将组件内容封装在一个闭包内。这样可以避免全局污染，并提供了一个独立的工作区，比如 Vue.extend() 或者 Vue.component() 就是基于这个模式。

function MyComponent(options) {
  // 私有属性和方法
  var self = this;
  self.someData = options.data;

  // 公共方法
  self.init = function init() {
    console.log('Component initialized');
  };

  // 创建实例并暴露给外部
  return new Vue({
    el: '#my-component',
    data: self.someData,
    methods: { ... }
  });
}

// 使用时
var componentInstance = new MyComponent({ /* 初始化数据 */ });

2. **单例模式**: 如果公共组件需要在整个应用中共享状态或资源，可能会采用单例模式来保证只有一个实例存在。例如，Vuex 的 Store 实现了这一特性，作为整个应用的状态管理中心。

const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {}
});

export default store;