Vue.js 组件加载完成后自动执行方法并显示检测结果

本文将介绍如何优化 Vue.js 组件中的代码，使其在文章页内加载完成后自动执行方法并快速显示检测的结果。

原始代码

var icydm_pancheck = new Vue({
	el:'.icydm-pancheck',
	data:{
		data_text:'',
		data:'',
	},
	//插件初始化开始
	// 	created() {
	//         this.pancheck()
	//      },
	mounted(){
		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;
			}
			)
	},
	methods:{
		pancheck(){
			if(this.data){
				Qmsg['success'](this.data,{html:true}); 
			}else{
				Qmsg['success']("正在检查中，请稍后点击...",{html:true}); 
			}

		}
	}
})

优化后的代码

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();
        }
    }
});

代码优化说明

将 created() 方法注释掉： created() 方法在组件实例创建之前被调用，而我们希望在组件加载完成后才执行检测方法。
将 mounted() 方法中的内容移动到 checkPan() 方法： 将检测逻辑提取到一个单独的方法中，可以提高代码的可读性和可维护性。
在 mounted() 方法中调用 checkPan() 方法： 确保在组件加载完成后才执行检测逻辑。
在 checkPan() 方法中加入一个判断： 如果 data 已经有值，则直接显示结果，否则显示“正在检查中”的提示。

代码优化后的优点

提高代码的可读性和可维护性： 将代码分解成多个方法，更容易理解和修改。
提高代码的效率： 只在组件加载完成后才执行检测逻辑，避免不必要的调用。
改善用户体验： 快速显示检测结果，避免用户等待过久。

通过以上优化，Vue.js 组件可以在文章页内加载完成后自动执行方法并快速显示检测的结果，提升用户体验和代码质量。