Vue 曝光埋点插件的实现原理

VUE 曝光埋点插件的实现原理

vue自定义 插件

说到vue插件，vue就提供了自定义插件的功能。

定义

定义一个文件，这个文件 导出一个对象，这个对象包含install方法。
install方法有两个参数 一个是vue构造器 一个是使用插件时传入的参数。

const log = require("./core");// 具体 log方法
const logPlugin = {
    install(vue, options) {
        if (vue.$prototype.isServer) return;
        // 一些自己想做的事情
        // 全局添加方法属性，添加自定指令，注入mixin
    }

}

module.exports = logPlugin; // 单独使用的插件一般使用commonjs规范,向外暴露，并且适配性高

使用

import { VueLog } from "log";
Vue.use(VueLog, { eventType: 'click', actionType: 'page-icon', pageType: 'info-page' })
// 第一个参数就是你导出的自定义插件 第二个参数就是对应插件中install中第2个参数options 你可以传入一些属性

vue 自定义指令

因为我们需要做的是曝光dom，所以我们需要一个自定指令安装到dom上，来收集dom信息，并且确定这个dom是需要曝光埋点的

定义

参数
vue-directive有两个参数，第一个是指令名称，无需带v，如log-exp，第2个参数是一个对象，这个对象包含四个钩子函数，均为可选

• bind
  bind只执行一次 ，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted
  被绑定元素插入到父节点时调用，仅保证父元素存在，不保证绑定元素已经插入到文档中。
• update
  被绑