「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」。
前言
在2c业务场景中，数据充当着极其关键的角色，其在分析用户行为、应用留存等发挥着至关重要的作用。而埋点则是一种最简单最直接的用户数据统计方式，其能够精准的统计应用内用户的使用习惯以及各功能模块的使用反馈情况
数据埋点的形式有很多，其他也不乏有大量的第三方数据统计平台，譬如较为出名cnzz平台。而在自研的数据平台下，我们进行数据埋点的时候，埋点表通常由产品和运营同学协同指定，再由开发同学再特定场景交互下进行发送。通常这里就将业务场景和埋点强耦合在一起了，也就是说，我们需要在业务内去埋点
这里分享一下平时在项目中应用到的基于Vue的非侵入式埋点方案
自定义指令
在对埋点展开讨论之前，我们来认识一下vue中的自定义指令
“除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令” [来自官方文档的简介]
概括来说，自定义指令就是能为开发者在节点编译时提供自定义的注入事件。我们知道vue中是通过template进行书写，然后再运行过程中，会对template进行一次编译，使其成为vdom。那么在编译过程中，便可以对节点进行很多操作了，其中v-show、v-if、v-for也是利用编译这个时机进行解析的
开展工作
上面花了那么大的篇幅用来做准备工作，现在终于进入本文的正题了
编写指令
通常我们需要在根目录下创建一个名为 directive 的文件永安里存放自定义指令相关的文件
在文件内，我选择直接新建js文件用来编写指令(其实最好是再建多一个文件夹用来存放的，这样也有利于后续的拓展，不过自定义指令一般逻辑不会太复杂，所以我也就没整那么麻烦了)
譬如我会新建 collect.js 用来编写点击事件埋点
Vue.directive('collect', {
inserted(el, binding) {
const { value } = binding;
if (value) {
// 这里需要节点进行显式声明，以便后续对埋点事件进行拓展
const { click = false } = binding.modifiers;
if (click) {
// 这里对元素进行绑定 从而实现注入
el.addEventListener(
'click',
event => {
// doSomething...
},
false
);
}
} else {
throw new Error('xxxxx');
}
},
unbind(el, bingding) {
// doSomething....
}
});
这样我们就可以在编写模版的时候将埋点事件注入到需要埋点的元素中去，然后让模版编译阶段自动为我们注入click事件监听，从而实现点击事件的注入
如何使用
至于怎么应用，这个也就不展开了，这个翻翻文档该有的都有...
结语
本次分享就到这里，下次再见啦 ~ (@^_^@)~
