vue3 实现点击加载刷新

<template>
	<div>
		<button>{{num}}</button>
		<div class="joks">
			<!-- 遍历笑话信息 -->
			<div class="jok" v-for="item in joks" :key="joks.docid">{{item.summary}}
			<hr >
			</div>
			<button @click="getJoks" :disabled="!canLoad">更多</button>
		</div>
	</div>
</template>
<script>
	// import btn from'../components/btn.vue'
	export default{
		data(){
			return {
				num:5,//数字5
				ind:null,//记录定时器id
				joks:[],//笑话数据
				page:1,//当前是第几页
				canLoad:true//是否加载下一页， 默认可以
			}
		},
		beforeCreate(){
			console.log("beforeCreate","创建前")
		},
		created(){
			console.log("created","创建完毕")
			//添加事件
			window.addEventListener("scroll",this.scrollHD)
			// 添加定时器
			this.ind=setInterval(()=>this.num++,2000);
			// 添加ajax
			this.getJoks()
		},
		beforeMount(){
			console.log("beforeMount","挂载前")
		},
		mounted(){
			console.log("mounted","挂载完毕")
		},
		beforeUpdate(){
			console.log("beforeUpdate","更新前")
		},
		updated(){
			console.log("updated","更新完毕")
		},
		beforeUnmount(){
			console.log("beforeUnmount","卸载前")
			clearInterval(this.ind)
			window.removeEventListener("scroll",this.scrollHD)
		},
		unmounted(){
			console.log("unmounted","卸载完毕")
		},
		methods:{
			scrollHD(e){
				console.log(document.documentElement.scrollTop)
			},
			getJoks(){
				//开始加载后，不让加载新的
				this.canLoad=false;
				// fetch是html新增的ajax方法,相当于 jquery中的$.get(url)
				fetch("http://520mg.com/mi/list.php?page="+this.page)
				.then(res=>res.json())//转化为json
				.then(res=>{
					// 输出json
					console.log(res)
					// 更新笑话列表
					//把原来的笑话数据，和现在的笑话数据合并，在赋值joks
					this.joks=this.joks.concat(res.result);
					this.page++
					//加载完毕后可以加载新的
					this.canLoad=true
				})
				.catch(err=>{
					//如果发生错误，也可以加载第二次
					this.canLoad=true
				})
			}
		}
	}
</script>
<style >
	.jok{
		padding: 10px;
	}
</style>