vue项目中数据埋点

最新推荐文章于 2026-06-10 08:15:00 发布

转载最新推荐文章于 2026-06-10 08:15:00 发布 · 1.8k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/chengeping/p/11459073.html

标签

#javascript #后端 #ViewUI

数据埋点用于记录系统操作行为，当触发特定行为时向后端发送请求。本文介绍了两种Vue项目中的实现方案：1. 通过在按钮上添加data-track属性，并在main.js中监听点击事件获取该值并发送请求；2. 使用自定义指令v-dataGrow来绑定需要埋点的节点，提供了一种更简洁的实现方式。

数据埋点其实就是对系统的某些操作行为进行记录，当触发行为时候对后端发起请求，让后端进行统计其实就是一次埋点过程。接下来就是对：新建，编辑，删除。。。。一系列行为进行监听。

　　实现方案：1. 1.在需要埋点的按钮节点加上data-track属性，然后入口文件main.js通过事件冒泡机制使用document.addEventLister("click", function() {})在函数中获取节点的data-track值，最后发起请求

　　　　　　　1. 2.第一点理想状况是可行的，但是由于项目中用了element中的组件，有些时候是拿不到data-track属性的

　　第二种方案:使用指令实现，对需要的埋点的节点使用v-dataGrow进行绑定：

 <span v-if="immediateEditList.includes(head.fieldType) && head.editable"
                data-type="immediateEdit"
                v-dataGrow="
                { alis: `${$route.query.subBusinessType}- 
        　　　　　　list-${$route.query.subBusinessType}-quickEdit-${appInfo.businessType}`,
                stop: false }"
                :data-id="scope.row.id"
                :data-attr="head.attr"
                >
</span>

　　而v-dataGrow的具体实现如下：

export default {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el, { value: { alis, stop = true } }, vnode) {
    el.addEventListener('click', (event) => {
      fn(alis) // 可以做任何事情，发送给后端
      if (stop) {
        event.stopPropagation() // 是针对有些原先代码把clik事件冒泡给禁止了
      }
    }, false)
  }
}

　　下面这种实现方案更简洁，一目了然。

转载于:https://www.cnblogs.com/chengeping/p/11459073.html