数据埋点：声明式埋点（无痕埋点）

预先声明埋点类型（提前封装好自定义的指令），在 DOM 或者组件上，通过设置即可以完成事件的统一上报；
- 声明式埋点是基于 vue 框架的自定义指令，可以一定程度的减小代码冗余解决代码耦合的问题。
- vue 中提供了自定义指令，在模版元素中插入自定义指令，可以跟踪元素的结构变化、跟踪数据变化，比 DOM 的 data 属性，从而更加方便抓取跟踪；
理论上，声明式埋点只需要关注两个问题：
- 需要埋点的 DOM 节点；
- 所需携带的数据；

声明式埋点标准写法：

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

埋点触发及数据回传：
- 声明埋点后、遍历 DOM 树，找到 [data-stat] 节点，给这个 button 绑上 click 事件；
- 当事件被触发后，把参数 111 在回调函数中通过请求发出去。

按照官方文档，一个指令定义对象提供如下几个钩子函数：
- bind
  - 只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置。
- inserted
  - 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update
  - 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
    - 指令的值可能发生了改变，也可能没有。
  - 但是可以通过比较更新前后的值来忽略不必要的模板更新。
- componentUpdated
  - 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind
  - 只调用一次，指令与元素解绑时调用。
- 其中 bind 和 update 是比较重要的两个钩子函数，
  - 它能跟踪 DOM 的出现和变化，获取数据并数据上报埋点；
指令钩子函数会被传入以下参数：
- el
  - 指令所绑定的元素，可以用来直接操作 DOM。
- binding
  - 一个对象，包含指令的指令名、绑定值、表达式等。

页面曝光
- 对于 vue 的单页应用来说，页面的切换跟踪就是路由的变化；
- 但是在统一的路由钩子、放置每个页面不同的数据不太现实，于是就考虑在每个 view 页面根部埋下页面曝光数据，只要用户一访问该页面，就触发页面曝光；
坑位曝光
- 坑位的曝光实际就是一个 DOM 出现在用户视野范围内进行抓取；
- 需要借助全局滚动（scroll）事件，使用节流的方式检测目标坑位是否在可视范围内，在的话就触发坑位曝光
坑位点击
- 坑位的点击需要对目标坑位进行点击事件绑定；
- 在不影响目标坑位原有事件基础上，绑定点击的埋点上报，在元素unbind的时候解除对应点击事件