什么是埋点？
通俗点讲，我理解的埋点就是在系统中植入的一些代码（当然不是恶意代码哈），这些代码可以检测到用户某个行为，可以拿到一些想要的数据，这就是所谓的埋点。
在如今的信息时代，数据是一切业务以及企业的核心，对数据的采集、管理、分析是必不可少的一环，而埋点主要是对数据的采集，这决定了后期管理，以及数据分析的准确性，因此，埋点对于任何一个系统都是比较重要的。
埋点方案
从大方向上来说，埋点主要分为前端埋点和后端埋点，本次我只研究了前端埋点的一些方案。
前端埋点主要分为： 代码埋点，可视化埋点和无埋点。
代码埋点
业界比较有名的是：友盟和百度统计，代码埋点的方式可分为以下两种
命令式埋点
在页面ready之后或者点击某个BUTTON之后，进行一些数据收集和上报；通常写在ready回调和button点击事件回调函数里面。
但这种埋点方式的不足是将业务逻辑和埋点代码混杂在了一起，使得业务代码逻辑比较繁琐，也不利于维护；所以要将埋点代码和业务逻辑相解耦。
声明式埋点
通过声明式埋点来解耦业务代码
在VUE的项目中，可以考虑基于指令的埋点解决方案。VUE 自定义指令提供了一种机制，将数据变化映射为DMO操作。VUE提供了自定义指令的几个钩子：
bind：只调用一次，在指令第一次绑定到元素上时调用。
update： 在 bind 之后立即以初始值为参数第一次调用，之后每当绑定值变化时调用，参数为新值与旧值 unbind：只调用一次，在指令从元素上解绑时调用。
可以通过这种方式在指令第一次绑定到元素上的时候，添加一些事件处理函数，可以是点击事件，或者是搜索框的输入操作，在使用指令的时候传一些需要收集的业务数据，或浏览器内部的数据、登录用户的数据，或行为数据，当前路由信息等等；
比如：
Vue.directive('clickUser', {
// 指令的定义
bind: function (el, binding) {
el.onclick = () => {
console.log(binding)
console.log(binding.arg)
const data = binding.value
console.log('点击数据')
console.log(data)
}
},
inserted: function (el, binding) {
// 插入到父元素时触发
console.log('插入父元素')
},
update: function (el, binding, vnode) {
console.log('update')
console.log(el)
console.log(binding)
},
componentUpdated: function () {
// 组件更新和下面的子组件都更新完毕
console.log('组件更新')
},
unbind: function () {
// 元素从页面中解绑时
console.log('元素解绑')
}
})
代码埋点工作量会比较大，容易出现漏埋或错埋的情况，而且如果有埋点更新的话，需要重新部署上线，这点上来说是代价比较大的。但是，代码埋点可以获取到很多定制化的埋点需求，可以获取到业务内部的深层数据。
可视化埋点（框架式埋点,也叫无痕埋点）
像Mixpanel和Kissmetrics等的数据服务商，实现了可视化埋点，可以通过配置要对哪些地方进行埋点。
这方面的工具还没有看，只知道大概的理念，后期看完再更新上来哈。
无埋点
对所有的动作行为进行埋点，包括检测BUTTON、FORM、链接等等元素的行为，然后进行数据收集。但这种数据量会比较大，流量大，传输起来会比较慢。
总结
总的来说，前端埋点和前端监控存在着很多的联系，前端性能监控包括：数据监控、性能监控和异常监控，这些都可以通过前端埋点的方式来获得；而前端埋点不论是代码埋点、可视化埋点还是无埋点，都有各自的优势，因此，一套完备的前端埋点方案实际上可将三种方案相结合。