vue封装常用的自定义指令,vue埋点实例
这篇文章主要给大家总结一下关于vue工程师会封装的嵌入式指令的知识。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
目录
前言指令基础知识钩子函数钩子函数参数文本用法和思想实现一些概括总结
前言
最近项目中需要做嵌入功能，整理产品的嵌入文档，发现有很多点击嵌入点的场景。因为埋场使用的是阿里云sls日志服务，所以基于代码的埋场是人工黑的。设置好埋点的形式后，有很多技术实现方法。哪个更好？
经过片刻的考虑.
决定封装一个埋指令，用起来会更方便，因为指令的粒度更细，能击中要害，挺适合上面说的业务场景。
指令基础知识
在此之前，让我们回顾一下vue自定义说明。这里只介绍常见的基础知识。更完整的介绍，请查看官方文档。
钩子函数
Bind:仅在指令第一次绑定到元素时调用一次。
Inserted:当绑定元素插入父节点时调用。
Update:当组件的VNode更新时调用。
钩子函数参数
El:指令绑定到的DOM元素。
绑定：包含以下属性的对象：
Value:指令的绑定值，例如，在v-my-directive=1 1 中，绑定值为2。
Arg:传递给指令的参数，可选。例如，在v-my-directive:foo中，参数是 foo 。
Vnode:指令绑定到的当前组件vnode。
这里分享一个小技巧。钩子函数参数中没有可以直接获取当前实例的参数，但是可以通过vnode.context获取这个在我之前的vue trick文章中也有分享，有兴趣可以看看。
正文
让我们言归正传。下面将介绍嵌入指令的使用以及它是如何在内部实现的。
用法与思路
一般我在打包一个东西的时候，会先确定如何使用，然后从用法入手来打包。这样会让整个思路更清晰，也可以在定义使用时考虑易用性，以免包装后因为使用不理想而返工。
掩埋场报告的数据可分为公共数据(每个掩埋场报告的数据)和用户自定义数据(可选的附加数据，将与公共数据一起报告)。然后公共数据将在内部处理，自定义数据需要从外部导入。所以有以下两种用法：
一般用法
div垂直轨道：clickBtn/div
自定义数据
div v-track:click BTN= { other: XXX } /div
可以看出，掩埋事件是以arg的形式传递的，而在此之前，一些好友封装的掩埋事件是以值的形式传递的。但我个人更喜欢arg的形式，可以让人更一目了然对应的被埋事件是什么。
此外，报告的数据结构大致如下：
{
事件名称： clickBtn
userId: 1，
用户名：“xxx”，
数据：{
其他： xxx
}
}
EventName是埋点对应的事件名称，它的兄弟是公共数据，而自定义数据放在数据中。
实现
定义一个track.js文件
从“js-sls-logger”导入SlsWebLogger
函数getslsweblogger instance(options={ }){
返回新的SlsWebLogger({
主持人：“***”，
项目：“***”，
日志存储：`*** `，
时间：10，
数数：10，
.选择
})
}
导出默认值{
安装(Vue，{baseData={}，slsOptions={}) {
const slsWebLogger=getslsweblogger instance(SLS options)
//获取公共数据的方法
设getBaseTrackData=type of base data=== function ？baseData : ()=baseData
设baseTrackData=null
常量跟踪={
名称：“轨道”，
插入(el，装订){
el.addEventListener(click ，()={
如果(！binding.arg) {
console . error(“tracks ls web logger事件名称无效”)
返回
}
如果(！baseTrackData) {
baseTrackData=getBaseTrackData()
}
basetrackdata . event name=binding . arg
//自定义数据
设trackData=binding.value {}
const submit data=object . assign({ }，baseTrackData，{data: trackData})
//报告
slsWebLogger.send(submitData)
if(process . ENV . node _ ENV=== development ){
console.log(跟踪slsWebLogger ，提交数据)
}
})
}
}
Vue.directive(Track.name，Track)
}
}
封装比较简单，主要做两件事：一是在绑定指令的DOM中添加click事件，二是处理上报数据。在封装嵌入指令时，通过baseData导入公共数据，可以增加通用性。第二个参数是报表平台的一些配置参数。
初始化时的寄存器指令：
从“src/store”导入商店
从“库/指令/轨道”导入轨道
函数getBaseTrackData () {
让userInfo=store . state . user . user _ info
//公共数据
const baseTrackData={
UserId: userInfo.user_Id，//用户id
用户名：userInfo .用户名//用户名
}
返回baseTrackData
}
Vue.use(track，{baseData: getBaseTrackData})
Vue.use时会自动找到安装函数调用，最后全局注册指令。
加点通用性
除了点击埋点外，如果有停在埋点等场景，上述说明不适用。为此，可以增加人工呼叫的形式。
导出默认值{
安装(Vue，{baseData={}，slsOptions={}) {
//.
Vue.directive(Track.name，Track)
//手动调用
Vue.prototype.slsWebLogger={
发送(跟踪数据){
如果(！trackData.eventName) {
console . error(“tracks ls web logger事件名称无效”)
返回
}
const submit data=object . assign({ }，getBaseTrackData()，TrackData)
slsWebLogger.send(submitData)
if(process . ENV . node _ ENV=== development ){
console.log(跟踪slsWebLogger ，提交数据)
}
}
}
}
这种安装到原型的方式可以方便地在每个组件实例上调用。
导出默认值{
//.
已创建(){
this.slsWebLogger.send({
//.
})
}
}
总结
本文分享了封装嵌入式指令的过程，实现起来并不难。主要有两种形式。点击埋点通过绑定DOM click事件来监控点击报告，其他场景提供手动调用。主要是想记录包装的想法，以及如何使用。嵌入的实现也根据业务进行调整。例如，注册嵌入指令可以接受报告平台的配置参数。毕竟人是活的，代码是死的。只要能满足业务需求，能维护好，就能用的舒服。
关于vue工程师必须打包的嵌入式指令知识总结的这篇文章到此为止。关于vue包的嵌入式指令的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。