Vue.js 页面加载自动检测链接有效性并清除数据

在网页开发中，我们常常需要在页面加载完成后自动执行一些操作，比如检测链接有效性，并及时将结果显示在页面上。同时，为了避免在页面关闭后仍然执行清除操作，我们需要在页面关闭时移除事件监听。

本文将介绍如何在 Vue.js 中使用 mounted 钩子函数和 window.addEventListener() 方法监听页面的 unload 事件，并在页面加载完成后自动执行检测链接有效性，并及时显示结果，同时在页面关闭时清除数据。

原始代码：

var icydm_pancheck = new Vue({
    el:'.icydm-pancheck',
    data:{
        data_text:'',
        data:'',
    },
    mounted(){
        this.checkPan();
    },
    methods:{
        checkPan(){
            if(!this.$refs.pancheck)return;
            let post_id = this.$refs.pancheck.getAttribute('data-id');
            this.$https.post(b2_global.site_info.admin_ajax,'id='+post_id+'&action=icydm_pancheck').then(res=>{
                this.data=res.data;
                if(this.data){
                    Qmsg['success'](this.data,{html:true}); 
                }else{
                    Qmsg['success']('正在检查中，请稍后点击...', {html:true}); 
                }
            });
        },
        pancheck(){
            this.checkPan();
        }
    }
});

修改后的代码：

var icydm_pancheck = new Vue({
    el:'.icydm-pancheck',
    data:{
        data_text:'',
        data:'',
    },
    mounted(){
        this.checkPan();
        window.addEventListener('unload', this.clearData);
    },
    methods:{
        checkPan(){
            if(!this.$refs.pancheck)return;
            let post_id = this.$refs.pancheck.getAttribute('data-id');
            this.$https.post(b2_global.site_info.admin_ajax,'id='+post_id+'&action=icydm_pancheck').then(res=>{
                this.data=res.data;
                if(this.data){
                    Qmsg['success'](this.data,{html:true}); 
                }else{
                    Qmsg['success']('正在检查中，请稍后点击...', {html:true}); 
                }
            });
        },
        pancheck(){
            this.checkPan();
        },
        clearData(){
            this.data_text = '';
            this.data = '';
        }
    },
    beforeDestroy() {
        window.removeEventListener('unload', this.clearData);
    }
});

解释：

在 mounted 钩子函数中使用 window.addEventListener() 方法监听页面的 unload 事件，并在事件触发时执行 clearData 方法清除数据。
在 beforeDestroy 钩子函数中使用 window.removeEventListener() 方法移除 unload 事件的监听，避免在页面关闭后仍然执行清除操作。

注意：

Qmsg['success'] 是一个假设的提示函数，需要根据实际情况修改。
b2_global.site_info.admin_ajax 是一个假设的 AJAX 请求地址，需要根据实际情况修改。

通过以上步骤，我们可以在页面加载完成后自动执行检测链接有效性，并在页面关闭时清除数据，从而保证页面的正常运行。