Vue3+TypeScript埋点方面的应用实践

// track.ts
  export function track(eventName: string, eventData: any) {
    // 埋点上报代码
    console.log(`Track event: ${eventName}`);
  }

// track-plugin.ts
  import { App } from 'vue';
  import { track } from './track';
  export const trackPlugin = {
    install(app: App) {
      app.config.globalProperties.$track = track;
    },
  };

// main.js
  import { createApp } from 'vue';
  import App from './App.vue';
  import { trackPlugin } from './plugins/track-plugin';
  const app = createApp(App);
  app.use(trackPlugin);
  app.mount('#app');

// MyComponent.vue
  export default defineComponent({
    methods: {
      sendDataToTrack() {
        this.$track('button_click', { button_name: 'like_button' });
      },
    },
  });

// track.d.ts
  export type EventName = 'button_click' | 'page_view' | 'form_submit';
  export type EventData = { [key: string]: any };
  export function track(eventName: EventName, eventData: EventData): void;

// click-tracker.ts
  import { ComponentOptions } from 'vue';
  import { track } from './track';
  // Mixin
  const clickTracker: ComponentOptions = {
    methods: {
      // 手动添加handlers
      addClickTracker() {
        console.log('Mixin - click tracker added');
        const elements = document.querySelectorAll('[data-tracking-click]');
        for (let i = 0; i < elements.length; i++) {
          elements[i].addEventListener('click', (event) => {
            const target = event.target as Element;
            const eventName = target.getAttribute('data-tracking-click')!;
            const eventData = JSON.parse(target.getAttribute('data-tracking-value')!);
            track(eventName, eventData);
          });
        }
      },
    },
    mounted() {
      this.addClickTracker();
    },
    updated() {
      this.addClickTracker();
    },
  };
  export default clickTracker;

// MyComponent.vue
  import { defineComponent } from 'vue';
  import clickTracker from './click-tracker';
  export default defineComponent({
    // 使用Mixin
    mixins: [clickTracker],
    methods: {
      sendDataToTrack() {
        // 埋点上报
        this.$track('button_click', { button_name: 'add_cart_button' });
      },
    },
  });