余文乐 2020 23：02 写篇vue埋点 ???? 无脑低能篇
项目背景： vue ????
埋点要求 页面初始化数据 元素点击事件获取itemid （元素本身）stepid(步骤)????
所需文件 ： App.vue（vue主组件） main.js （vue入口文件） 埋点单页面????
具体做法：
首先我们需要了解的是在vue 项目中的埋点大可分为两种：页面初始化加载以及具体元素的事件的事件行为。
页面初始化： 利用 vue项目主组件 app.vue中的update生命周期结合浏览器本地数据的缓存localstroge进行数据的抓取与上送 原理：单页面在初始化mounted生命周期中存入页面相关信息，然后在进入单页面之前会经过app.vue中写好的路由监听此时只要将对应页面信息整理好放入缓存中 等待进入app.vue的update生命周期 然后将上一个页面相关元数据从缓存中取出， 并将数据 插入上送链接 最后通过app.vue 中将data中的数据上送到img标签的src路径中从而向后台发送请求，需要注意的是 某些业务情况下可能需要从一个非埋点页面进入埋点页面 那么此时就需要在单页面初始化添加一个buried埋线flag 值 ，并且将这个值设为固定值，在刚进入update钩子函数时进行判断是否再决定是否发送请求然后再将此值清空 以便下次判断。
具体步骤如下：
1.在入口文件main.js中创建一个方法并挂载到原型上
2.单页面mounted钩子中进行埋点写入初始化事件并调用传入当前页面数据
3.APP.vue中watch监听路由并将数据处理好等待进入update生命周期
4. App.vue中Update中取值并塞入img标签 发送请求 清空数据
具体元素事件：在入口文件main.js中创建元素自定义指令和原型方法并灵活运用（在元素事件过多时需要斟酌选择二者其一）在页面中调用将元素对应的itemid 或者stepid传入app.vue的img中发送给后台。
具体步骤如下：
1．main.js中创建自定义指令 进行数据的获取
2.main.js中创建一个方法挂载到原型上
3.在页面中调用改方法
（1）标签中使用自定义指令
（2）方法中使用原型上的方法