本文主要介绍vue项目前端嵌入点的实现，通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。有需要的朋友下面和边肖一起学习。

埋点方案的确定

代码嵌入：在需要嵌入的节点调用接口，用它上传数据。如百度统计；

可视化嵌入：通过可视化工具配置的嵌入，即所谓的“无痕嵌入”。页面加载时，前端可以读取配置数据，自动调用接口进行嵌入。比如开源的Mixpanel

无埋点：前端自动收集所有事件并报告埋点数据。比如国内的神策数据；

当时工期紧，人力不足，显然不允许我们开发可视化嵌入方案，也没有嵌入方案，只好采用代码嵌入方案。

命令式埋点

命令式嵌入，顾名思义，开发者需要手动嵌入需要嵌入的节点。比如点击按钮或链接后的回调函数，当页面准备好时发送请求。每个人都必须熟悉这个代码：

//页面加载时发送嵌入请求。

$(文档)。ready(function(){

//.这里有一些商业逻辑

sendRequest(参数)；

});

//单击按钮时发送隐藏请求。

$(button )。单击(函数(){

//.这里有一些商业逻辑

sendRequest(参数)；

});

我们很容易发现，这种做法很可能会将嵌入式代码侵入到业务代码中，使得整个业务代码变得繁琐且容易出错，后续的代码也会变得更加膨胀且难以维护。因此，我们需要将掩埋代码与具体的业务逻辑解耦，即声明性掩埋代码，以提高掩埋代码的效率和代码的可维护性。

声明式埋点

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

需要掩埋的DOM节点；

所需数据

因此，我们可以很快想出一种声明式嵌入的方法：

//key表示埋藏点的唯一标识；Act表示埋点模式。

按钮数据-stat= {key: 111 ，act: click} 埋点/按钮

然后可以遍历DOM树，找到[data-stat]的节点，将click事件绑定到这个按钮上，通过请求在回调函数中发送这些参数。

在DOM节点(html)上声明埋藏点与业务逻辑(通常在Javascript文件中)是分离的。打电话也很方便。

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

遍历DOM树的时间是一个简单的例子。表格的行数据是异步加载的，表格所在行的操作按钮需要被埋起来，所以遍历DOM ready时显然是找不到的。

掩埋事件的数量问题，如何保证掩埋事件不会重复绑定到元素，一次操作发送N个掩埋请求？

如何处理特有的掩埋行为，比如显示掩埋点的页面，显示掩埋点的区域？

解除绑定时如何销毁绑定的事件？

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

通常有必要在项目中进行数据嵌入。这时，使用自定义命令将非常简单。

在项目条目文件main.js中配置我们的定制指令

//坑位置指令

Vue.directive(stat ，{

bind(el，binding) {

el.addEventListener(click ，()={

const data=binding.value

let前缀= store

if (OS.isAndroid || OS.isPhone) {

前缀= mall

}

analytics.request({

ty: `${prefix}_${data.type} `，

dc: data.desc ||

}， n )；

}，假)；

}

});

2.使用路由拦截统计页面级别的 PV

因为第一次尝试在单页应用中嵌入数据，项目上线一周后，数据统计后台发现首页的PV远高于其他页面，数据非常异常。后来和数据后台的人交流，问了埋点的统计原理，才发现问题。

传统应用在页面加载的时候一般会有一个异步的js加载，就像百度的统计代码一样，所以我们在加载每个页面的时候，都会统计数据；但是在单页面应用中，页面加载只初始化一次，所以其他页面的统计需要我们自己手动上报。

解决办法

使用vue-router的beforeEach或afterEach钩子来报告数据。根据业务逻辑选择哪一个最好。

const analyticsRequest=(to，from)={

//只统计页面跳转数据，不统计当前页面查询的不同数据。

//所以这里只使用了path。如果需要计数查询，可以使用to.fullPath

if (to.path！==from.path) {

analytics.request({

URL:` { location . protocol }//{ location . host } { to . path } `

});

}

};

router.beforeEach((收件人，发件人，下一个)={

if(to . matched . some(record=record . meta . requires auth)){

//这里进行登录等前置逻辑判断。

//判断通过后，上报数据。

.

analyticsRequest(至，自)；

}否则{

//如果不需要判断，直接报数据。

analyticsRequest(至，自)；

next()；

}

});

在组件中使用我们的自定义说明。

基于 jquery + widget 的老项目，

然后这些项目中的DOM操作都是通过jquery甚至原生DOM API实现的，Vue的自定义指令无法工作。

基于变异观察器API的Mixin

MutationObserver是DOM3标准中提出的标准API，它为开发者提供了感知某个DOM节点变化的能力。您可以监控以下场景：

ChildList:插入和删除目标节点的子节点引起的更改。

属性：目标节点属性变化引起的变化。

CharacterData:目标节点的文本节点变化引起的变化，比如通过appendData()。

子树：目标节点的后代节点变化引起的变化。

AttributeOldValue:当属性监听设置为true时，可以记录更改前的属性值。

CharacterDataOldValue:当characterData monitoring设置为true时，可以记录更改前的属性值。

AttributeFilter:您可以设置要监控的属性列表。

不过为了保证MutationObserver能在所有浏览器中正常工作，我们还是引入了这个API的polyfill。详情可以在这里找到。

在具备这种能力的前提下，我们可以在任何DOM操作下触发Vue重新解析指令。

我们把MutationObserver封装成一个Vue mixin，非Vue应用的业务代码只需要引入这个mixin，也可以很好的解耦。

详细的实现原理可以在下面的伪代码中找到：

让观察者；

导出默认值{

ready() {

//打开监视

观察者=新突变观察者(突变={

这个。$编译(这个。$ El)；

});

observer.observe(这个。$el，config)；

},

销毁(){

//清洁工作

observer . disconnect()；

observer . taker records()；

}

}

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。