Vue單頁面中進行業務資料的上報

為什麼要在標題裡加上乙個業務資料的上報呢，因為在咱們前端專案中，可上報的資料維度太多，比如還有效能資料、頁面錯誤資料、console捕獲等。這裡我們只講解業務資料的埋點。

業務資料的上報主要分為：

通用和必須上報的資料，均在上報的**中進行固定，比如裝置資訊、使用者資訊、cookie等都需要上報的資料，在上報前處理完成，需要非同步獲取且資料固定的，做好儲存，防止每次都要重新獲取；其他額外的資料，通過對外暴露的send方法進行傳遞。

比如獲取資訊這塊，客戶端給到的jsapi，有可能只能非同步呼叫，那麼我們就可以這麼處理：

return ()=> else else

})})}}

}各個路由的pv上報可以通過vue router的aftereach來實現，每次路由重新整理時，aftereach方法都會執行，那麼我們在這裡進行pv的上報：

// 每個hash路由的pv上報
router.aftereach((to)=>)

使用者點選行為的上報，之前是在每個點選的業務**最後，進行一次點選上報。不過這樣乙個不好的地方是，必須為每個需要上報的點選元素新增一段業務**，同時，如果多個點選行為共享某個業務片段時，需要進行點選區分：

methods: )}}

現在，我們利用vue中的自定義指令來實現點選行為的上報，上報的處理與業務**進行分割：

// 自定義指令的官方文件： 
// 自定義boss指令
// bind: 只對該元素繫結一次
// el: 觸發時的dom元素
// binding.value: 傳入的值
// 使用 v-boss=""
vue.directive('boss', )}})

自定義v-boss指令後，我們就可以在元素上使用這個指令後：

這裡的資料上報是使用者點選行為之後的結果上報，比如使用者點選了分享按鈕，那麼最終他是真的分享成功了，還是中途又取消了。這種資料的上報，可以分析出使用者從意圖操作到最終實現的乙個流失情況。

操作結果的資料上報，依賴於客戶端或者介面給反饋的結果，這就需要在業務**中實現了，定義乙個全域性變數$databoss，通過這個來上報資料：

比如分享是否成功的監控：

// 發起分享
handleshare() );})}

根據介面中的資料進行上報：

handleuser() 
});})
}

前端資料上報的維度很多，都是為了方便我們更加的了解使用者、了解產品，方便以後的功能迭代。