Vue中常见的设计模式

Vue中常见的设计模式有哪些呢？

1. 单例模式

// Vue实例本身就是单例模式
const app = new Vue({
  // ...
});

// Vuex store也是单例模式
const store = new Vuex.Store({
  state: {
    count: 0
  }
});

2. 观察者模式

// Vue的响应式系统就是观察者模式的实现
export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  // watcher观察数据变化
  watch: {
    message(newValue, oldValue) {
      console.log('数据变化了', newValue, oldValue);
    }
  }
}

3. 发布订阅模式

// Vue的事件机制
export default {
  methods: {
    // 发布事件
    handleClick() {
      this.$emit('custom-event', data);
    }
  },
  // 订阅事件
  mounted() {
    this.$on('custom-event', this.handleEvent);
  }
}

// 父子组件通信
<child-component @custom-event="handleEvent" />

4. 工厂模式

// Vue组件就是一个工厂模式
Vue.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: '<button @click="count++">点击了{{ count }}次</button>'
});

// 动态组件创建
const ComponentFactory = {
  createComponent(type) {
    switch(type) {
      case 'button':
        return ButtonComponent;
      case 'input':
        return InputComponent;
      default:
        return null;
    }
  }
}

5. 代理模式

// Vue 3的响应式系统使用Proxy
const handler = {
  get(target, key) {
    track(target, key);
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
    trigger(target, key);
    return true;
  }
};

const state = new Proxy({
  count: 0
}, handler);