vue项目前端埋点的实现

埋点方案的确定。业界的埋点方案主要分为以下三类：

在当时排期紧凑，人力紧缺的情况下，显然不允许我们去开发可视化埋点方案和无埋点方案，所以只能采取代码埋点方案。

命令式埋点

命令式埋点，顾名思义，开发者需要手动在需要埋点的节点处进行埋点。如点击按钮或链接后的回调函数、页面ready时进行请求的发送。大家肯定都很熟悉这样的代码：

// 页面加载时发送埋点请求$(document).ready(function(){  // ... 这里存在一些业务逻辑  sendRequest(params);});// 按钮点击时发送埋点请求$('button').click(function(){  // ... 这里存在一些业务逻辑  sendRequest(params);});

可以很容易发现，这样的做法很有可能会将埋点代码侵入业务代码，这使整体业务代码变得繁琐，容易出错，且后续代码会愈加膨胀，难以维护。所以，我们需要让埋点的代码与具体的业务逻辑解耦，即 声明式埋点 ，从而提高埋点的效率和代码的可维护性。

声明式埋点

理论上，声明式埋点只需要关注两个问题：

因此，可以很快想出一个声明式埋点的方法：

// key表示埋点的唯一标识；act表示埋点方式<button data-stat="{key:'111', act: 'click'}">埋点</button>

那么可以去遍历DOM树，找到 [data-stat] 的节点，给这个button绑上click事件，把这些参数在回调函数中通过请求发出去。

在DOM节点(html)上声明埋点，与业务逻辑（通常在Javascript文件中）就解耦了。调用也很方便。

看起来很美，但这样就能解决问题了吗？显然是不够的。还需要解决以下问题：

1.自定义指令实现埋点数据统计

在项目中通常需要做数据埋点，这个时候，使用自定义指令将会变非常简单

在项目入口文件 main.js 中配置我们的自定义指令