前端使用自定义指令实现埋点【vue3】

vue项目有时候会需要进行数据采集，记录用户行为习惯，而且很多页面都会使用到，所以用vue自定义指令来实现埋点功能。

埋点的几种方式：页面埋点（浏览次数及时长等）、点击埋点（每一次点击行为）、曝光埋点（统计区域是否被用户浏览）

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

//全局自定义指令
app.directive('track',{
    mounted(el,binding,vnode,prevVnode){
        // 点击事件处理逻辑
        el.handler = function(e) {
            console.log('发送请求-点击')
        }
        // 类型，当前是何页面，行为描述，
        let {type,currentUrl,desc} = binding.value
        if (type=='browse') {
            // 浏览类型发送请求记录数据
            console.log('发送请求-记录')
        }else if (type=='click') {
            // 点击类型，监听点击事件请求记录数据
            el.addEventListener('click',el.handler,false)
        }
    },
    // 元素卸载前移除监听事件
    beforeUnmount(el){
        el.removeEventListener('click',el.handler)
    }
})

app.mount('#app')