vueonload的简单介绍

本篇文章给大家谈谈vueonload，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、VueCli用keep-alive实现onLoad,onShow
• 2、vue定时器重新计数
• 3、vue.js中怎样用onload事件
• 4、vue3页面关闭事件
• 5、vue 图片加载完成事件

VueCli用keep-alive实现onLoad,onShow

vue返回上一页的时候，默认都会重新执行生命洞伍猛周期，重新加载数据，这样其实不太友纳桥好。那我们仿照微信小橘察程序，返回上一页不会触发onLoad，但是会触发onShow，我们就可以在onShow里面做一些事情。

[img]

vue定时器重新计数

vue写全局定时方法是直接上代码，全局变量存在seesion storage中，纯原生js，可在任意场景/框架中使用。

方法过程是初始化计时器，建立计时器模板，使用字符串设置时分秒，安排窗口聚焦和失焦，就能够成功的设置好全局的定时方法。

如何搭春使轮枝高用数据：因为是存在sessionStorage中的，所以直接用sessionStorage.getItem(str)就能拿到对应数据，且数据刷新后不清除，注意拿到的是字符串，且方法已经补0。

一些问题：如腊尺果要刷新后计时器方法还能用，在app.vue(全局)中写一个window.onload，虽然把以上方法写里面就行了,其他框架没用过，但是原理也差不多。

vue.js中怎样用onload事件

可以用 v-on 指令监听 DOM 事件胡贺：

div id="携散example"

裤隐派button v-on:click="greet"Greet/button

/div

绑定了一个单击事件处理器到一个方法 greet。下面在 Vue 实例中定义这个方法：

var vm = new Vue({

el: '#example',

data: {

name: 'Vue.js'

},

// 在 `methods` 对象中定义方法

methods: {

greet: function (event) {

// 方法内 `this` 指向 vm

alert('Hello ' + this.name + '!')

// `event` 是原生 DOM 事件

alert(event.target.tagName)

}

}

})

// 也可以在 JavaScript 代码中调用方法

vm.greet() // - 'Hello Vue.js!'

vue3页面关闭事件

node.js

VUE监听页面刷新和关闭事件



大伟欧巴

原创

关注

1点赞·3154人阅读

背景：公司有一个数据看板枯郑，，需求是要统计看板有多少人看过，，每个人停留的曝光时间没乱颂

使用技术：目前使用的技术是 后端Springboot 权限用的是SpringSecurity，前端页面是

Vue+Element，公司看板的使用人大多利用谷歌浏览器查看。。

前端请求权限流程：用户登陆后会把用户的信息加密处理放进cookies，，然后会用vue的拦截器，，拦截要发送的请求，，并且在每个请求的headers里面带上Cookies里面的用户加密信息

// 创建axios实例

const service = axios.create({

baseURL: xxx // api 的 base_url

timeout: 2000 // 请求超时时间

})

// request拦截器

service.interceptors.request.use(

config = {

if (getToken()) {

config.headers['AESAuthor'] = 'AESAES ' + getToken() // 让每个请求携带自定义token

}

config.headers['Content-Type'] = 'application/json'

return config

},

error = {

// Do something with request error

console.log(error) // for debug

Promise.reject(error)

}

)

登录后复制



就像Java中的WebMvcConfigurer，可以通过这个实现跨域的处理，或陪判者单独针对某一路径的请求特殊处理

第一个重点！！！(这个问题后面会讲到)

线上环境：在服务器上面运行项目 是通过nginx访问vue的页面，并拦截vue发送的请求转发到后端服务

本地环境：vue通过nodejs转发请求到后端

本地环境处理：vue的页面请求是(例子)

但实际的后端接口路径应该是：

//nginx配置规则

location / { //页面请求走这个路径

root /data/app/web/xxx-xxx-xxx-xxx/dist;

try_files $uri $uri/ /index.html =404;

index index.html index.htm;

}

location /api { //api请求走这个路径

if ($request_uri ~* "WhchatUser/sendCode") {

return 403;

}

proxy_set_header Host $host:$server_port;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header X-Forwarded-Proto $scheme;

# Fix the "It appears that your reverse proxy set up is broken" error.

proxy_pass ;

proxy_read_timeout 90;

}

登录后复制



请求链路：通过vue的mounted事件创建一个createThisTime用以记录用户打开页面的时间，通过js的 beforeunload 和 unload 事件可以监听到页面的刷新和关闭事件，，在页面关闭的时候发送HTTP请求到后端，带上(1)用户的加密信息做鉴权，(2)当前时间 -createThisTime= 用户停留在这个页面的曝光时间

后端接口接收到请求之后往数据库插入一条数据。至此整个链路完成。

解决此需求的页面加载时只执行 onload 事件

页面关闭时，先 onbeforeunload 事件，再 onunload 事件

页面刷新时先执行 onbeforeunload事件，然后 onunload 事件，最后 onload 事件

直接上代码了！！！

data() { //第一步初始化createTime参数

return {

createThisTime：0, //mounted时期赋值，用于统计曝光时间

_beforeUnload_time: 0, //beforeunload时期赋值，在unload时期用于判断是页面关闭还是刷新

_gap_time: 0, //unload时期赋值，在unload时期用于判断是页面关闭还是刷新

is_fireFox: false //判断是否是火狐浏览器，火狐浏览器的beforeunload就是关闭

}

}

mounted() {

//赋值

this.is_fireFox = navigator.userAgent.indexOf("Firefox")-1

this.createThisTime = new Date().getTime()

this._beforeUnload_time = 0

this._gap_time= 0

//!!!!创建监听事件(ListenerEvent)!!!!

window.addEventListener("beforeunload", e = {this.beforeunloadFn(e)});

window.addEventListener("unload", e = {this.unloadFn(e)});

}

//！！！核心，你夹紧点，我要来了！！！

methods(){

beforeunloadFn(e){

//对_beforeUnload_time进行赋值在unloadFn时期与_gap_time进行差距计算判断刷新还是关闭

this._beforeUnload_time = new Date().getTime();

//统计曝光时间，用于火狐浏览器的关闭

let waitTime = this._beforeUnload_time - this.createThisTime;

if(this.is_fireFox) {//火狐浏览器执行beforeunloadFn方法代表关闭页面

this.countKanbanData(waitTime)

}

},

unloadFn(e){

//统计曝光时间

let waitTime = new Date().getTime() - this.createThisTime;

//计算unload事件和beforeunload事件执行间隔，，用于判断是关闭还是刷新

this._gap_time = new Date().getTime() - this._beforeUnload_time;

//第二个重点！！！为何刷新页面的时候也要发送请求？

if(this._gap_time 5){ //关闭页面

this.countKanbanData(waitTime)

} else { //刷新页面

this.countKanbanData(waitTime)

}

},

destroyed() {

//remove监听事件

window.removeEventListener("beforeunload", e = {this.beforeunloadFn(e)});

window.removeEventListener("unload", e = {this.unloadFn(e)});

this._beforeUnload_time = 0

this._gap_time = 0

}

}

登录后复制



//！！！再夹紧点，努力努力快到了！！！

大家执行到这一步，基本流程没啥问题了，然后测试的时候会感觉，请求好像发出去了但感觉好像又没法发出去。。时灵时不灵的，主要原因是什么呢？

真相！！！：vue发送请求是异步的，这个请求的的却却是在发送，但是页面关闭的时候卸载的太快了，这个请求可能还没发送出去页面就卸载了，导致发射失败。好嘛，原因找到了，原来vue是个秒男。

那怎么解决呢？

1.写个foreach，，拖延vue卸载的事件，给异步的http发射时间，俗话就是吃点药

2.通过div的img标签，，原理也是延迟vue的卸载事件。

这两种方法会导致客人的体验感贼差，，像我这种粗又硬肯定是不屑使用的。

一番查找之后我有了个更好的办法。因为vue发送是异步的而且页面卸载的事件确实很快，关闭事件一般都是 0-5毫秒之间(this._gap_time5)。。名副其实的秒男~。所以我们不一定非要vue去发送请求，，可以让浏览器去异步的发送请求。

//大家准备好，我要冲刺了//

3.navigator.sendBeacon 超链接是官方文档

这个方法的作用就是，，将vue发送的任务，，交给浏览器的任务队列去执行，方法也是异步的，vue的页面卸载是不会影响到浏览器任务的执行的。而且该方法也不会对vue的卸载有影响，用户体验感贼好，说不定还会给点小费。

但是~，这个方法会有些小的限制

3.1这个方法必须是post，我们可以尝试利用自带的blog类型去传毒参数，后端可以直接通过@RequestBody标签接收参数，反正我们前后端交互最常用的格式就是json

3.2.这个方法的headers只能设置content_type，也就是说无法把鉴权用的token放进headers里面，无法放进headers里面就直接放到参数中传呗，，反正我抓包也可以看到headers里面的内容，加密主要还是要靠aes，想防篡改的话那就加上时间戳再MD5。这些就不讨论了

直接上代码

countKanbanData(waitTime){

//判断浏览器是否支持navigator.sendBeacon，，大部分的浏览器都支持

if (!navigator.sendBeacon) return;

//参数

let body = {

waitTime: waitTime,

tokenStr: getToken() //headrs中无法记录，，当参数传入再解析

};

let headers = {

type: 'application/json; charset=UTF-8'

};

let blob = new Blob([JSON.stringify(body)], headers);

//线上或者测试因为用的nginx做的代理 所以这么写

console.log("sendBeacon ", navigator.sendBeacon((this.currentEnv + 'openapi/countKanbanData'), blob));

//本地dev 通过node

// console.log("sendBeacon ", navigator.sendBeacon('openapi/countKanbanData', blob));

}

登录后复制



这三种方法我写的比较简单，，我找了个更加详细的文章大家可以细看

方法链接

开始填坑了~~~

上文我提了两个重点问题，，这两个如果不特殊处理的话会有一定的bug

4.第一个重点问题：上文提到了，我本地开发的环境和线上的环境是不一样的。。

本地通过node做代理如果是api的请求那么拦截器会拦截请求并且填充ip+port，那么此时的api调用的方式为

navigator.sendBeacon('openapi/countKanbanData', blob)

登录后复制

此时不需要写全路径

如果是线上的话，那么是由nginx去做代理，页面和api的请求由ngxin去拦截管理

此时需要写全路径，不然这个请求的url是不完整的

navigator.sendBeacon('', blob)

登录后复制

5.第二个重点问题：为毛不论是 刷新还是关闭都需要发送一次请求并记录

不论是刷新和关闭都记录

5.1 if close 此时waitTime是准确的 需要记录

5.2 if flush 因为用户(点击浏览器的刷新按钮) 或者 (ctrl+R) 或者 (通过网址再次键入) 此时都会将mounted中的createThisTime 刷新

如果不记录的话 会导致有部分停留时间被刷掉 而每次都记录的话 只会将此次的waitTime分割成多条

vue 图片加载完成事件

当页面里有ajax请求数败袜据，然后渲染图片的时候，dom会有展开的一瞬，产品觉得无法接受，so...

想到了image的onload事件，当图片加载完成之后再显示页面

在渣吵图片加载完成之后再显察梁激示页面，就不会有图片展开的感觉，完美解决~

关于vueonload和的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。