vue項目中數據埋點

數據埋點其實就是對系統的某些操作行為進行記錄，當觸發行為時候對后端發起請求，讓后端進行統計其實就是一次埋點過程。接下來就是對：新建，編輯，刪除。。。。一系列行為進行監聽。

　　實現方案：1. 1.在需要埋點的按鈕節點加上data-track屬性，然后入口文件main.js通過事件冒泡機制使用document.addEventLister("click", function() {})在函數中獲取節點的data-track值，最后發起請求

　　　　　　　1. 2.第一點理想狀況是可行的，但是由於項目中用了element中的組件，有些時候是拿不到data-track屬性的

 

　　第二種方案:使用指令實現，對需要的埋點的節點使用v-dataGrow進行綁定： 

 <span v-if="immediateEditList.includes(head.fieldType) && head.editable"
                data-type="immediateEdit"
                v-dataGrow="
                { alis: `${$route.query.subBusinessType}- 
        　　　　　　list-${$route.query.subBusinessType}-quickEdit-${appInfo.businessType}`,
                stop: false }"
                :data-id="scope.row.id"
                :data-attr="head.attr"
                >
</span>

　　而v-dataGrow的具體實現如下：

export default {
  // 當被綁定的元素插入到 DOM 中時……
  inserted: function (el, { value: { alis, stop = true } }, vnode) {
    el.addEventListener('click', (event) => {
      fn(alis) // 可以做任何事情，發送給后端
      if (stop) {
        event.stopPropagation() // 是針對有些原先代碼把clik事件冒泡給禁止了
      }
    }, false)
  }
}

　　下面這種實現方案更簡潔，一目了然。