vue监听页面刷新事件_vue监听数据变化自动刷新

大家好，又见面了，我是你们的朋友全栈君。

运用的知识点：JavaScript的 onbeforeunload 函数

使用方法

window.οnbefοreunlοad=function(){

　　return ‘’;

}

注意：有返回值（’ ‘，true，false…都可以）才能弹出显示，或者有需要执行的事件也行。

onload、onunload、onbeforeunload的执行问题：

页面加载时只执行onload

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

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

注意：这种执行顺序是有浏览器的兼容问题的，请注意各种浏览器的区别。

onbeforeunload() 和onunload() 两个事件的区别：

相同点:

两者都是在对页面的关闭或刷新事件作个操作。

不同点：

onbeforeunload（）事件执行的顺序在onunload()事件之前发生。(因为，onbeforeunload()是在页面刷新之前触发的事件，而onubload()是在页面关闭之后才会触发的)。

onbeforeunload（）事件可以禁止onunload()事件的触发。

onunload()事件是无法阻止页面关闭的。

浏览器的兼容性不同。

vue中监听页面刷新和离开

方法一：直接在mounted或者activated中写

mounted() {        //写在mounted或者activated生命周期内即可
    window.onbeforeunload = e => {      //刷新时弹出提示
        return ''
    };
},

兼容性更好的写法：

window.onbeforeunload = function (e) {
  e = e || window.event;

  // 兼容IE8和Firefox 4之前的版本
  if (e) {
    e.returnValue = '关闭提示';
  }

  // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
  return '关闭提示';
};

方法二：添加监听

1. 在methods生命周期钩子中定义事件

methods: {
    beforeunloadFn (e) {
        // ...
    }
}

2.在 mounted 或者 activated 钩子中注册事件

mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
}

3. 在 destroyed 钩子卸载事件

destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
}

参考文章：https://www.jb51.net/article/102461.htm

https://www.cnblogs.com/gavin0517/p/5827405.html

https://blog.csdn.net/tayshin/article/details/73770653

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

对博客文章的参考，若原文章博主介意，请联系删除！请原谅

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。