Vue开发者必备：如何封装高效埋点指令的技巧总结？

本文共计1686个文字，预计阅读时间需要7分钟。

目录+前言+指令基础知识+锤子函数+锤子函数参数+正文字符+用法与思路+实现+增加通用性+总结+前言+近期项目中需要做埋点的功能，梳理产品埋点文档，比较埋点场景。

近期项目中需埋点功能，整理产品埋点文档，多比较埋点场景。

目录

• 前言
• 指令基础知识
• 钩子函数
• 钩子函数参数
• 正文
• 用法与思路
• 实现
• 加点通用性
• 总结

前言

最近项目中需要做埋点功能，梳理下产品的埋点文档，发现点击埋点的场景比较多。因为使用的是阿里云sls日志服务去埋点，所以通过使用手动侵入代码式的埋点。定好埋点的形式后，技术实现方法也有很多，哪种比较好呢？

稍加思考...

决定封装个埋点指令，这样使用起来会比较方便，因为指令的颗粒度比较细能够直击要害，挺适合上面所说的业务场景。

指令基础知识

在此之前，先来复习下vue自定义指令吧，这里只介绍常用的基础知识。更全的介绍可以查看官方文档。

钩子函数

• bind：只调用一次，指令第一次绑定到元素时调用。
• inserted：被绑定元素插入父节点时调用。
• update：所在组件的 VNode 更新时调用。