Vue生命周期

最新推荐文章于 2025-12-15 06:58:03 发布

原创最新推荐文章于 2025-12-15 06:58:03 发布 · 94 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

概念：每个组件从创建到销毁都会经历一系列特定的过程，称为生命周期

把过程执行的回调函数称为生命周期钩子函数

作用：创建后发起ajax请求

挂载后操作dom

添加事件监听

销毁前移除间隔调用，事件监听

说明：并不是每个生命周期都必须使用

生命周期8个：创建前后 created创建后

挂载前后 mounted挂载后

更新前后

销毁前后 beforeDestroy销毁前

beforeCreate创建前 特点：有this，没有data与methonds方法

created创建后 特点：有data，没有$el,down节点

用处：ajax请求，定时器，事件监听

beforeMount挂载前 特点：有$el,数据没有渲染

Mounted挂载后 特点：有dom节点，数据也渲染

用处：操作节点，ajax请求

beforeUpdata更新前 特点：会执行多次，数据更新，dom节点没有更新

Updated更新完毕 特点：会执行多次，数据更新，dom节点更新

beforeDestroy销毁前 特点：数据可以更新，视图已经不更新

用处：移除事件监听，停止定时器

destroyed销毁完毕 特点：没有this，切换视图与vue实例的联系

生命周期图解：

生命周期图：

生命周期代码案例

App.vue

<template>
	<div>
		<h1>爱笑话</h1>
		<!-- 03 使用组件 -->
		<JokCom></JokCom>
	</div>
</template>

<script>
	import JokCom from './components/JokCom.vue'
	export default{
		components:{JokCom}
	}
	//axios 安装
	// 01 cd /myday 切换到myday项目
	//02 npm i axios -S安装ajax请求工具
	//03 npm run serve 运行项目
</script>

<style>
	
</style>

JokCom.vue

<template>
	<div>
		<!-- <div>笑话数据</div> -->
		<div class="jok" v-for="jok in joks" :key="jok.docid">
			{{jok.summary}}
			<hr>
		</div>
		<button @click="getJok" :disabled="!canLoad" >加载更多</button>
	</div>

</template>
<style scoped="scoped">
	.jok{
		padding: 15px;
	}
</style>
<script>
	// 导入ajax请求工具  'axios'没有./开头,就直接从node_modules加载
	import axios from 'axios'
	export default{
		data(){
			return {
				joks:[],//笑话列表数据
				page:1,//当前是第几页数据
				canLoad:true,//是否可以加载下一页
			}
		},
		// 创建完毕
		created(){
			// 执行ajax请求
			this.getJok();
		},
		methods:{
			getJok(){
				this.canLoad = false;
				axios.get("http://dida100.com/mi/list.php?page="+this.page)
				// 表示请求成功
				.then(res=>{
					// res.data就是请求的数据
					console.log(res.data);
					// 把请求的数据添加到joks里面
					// concat(A,B) 把A数组与B数组合并赋值给joks
					this.joks = this.joks.concat(res.data.result)
					this.page++;
					this.canLoad = true;
				})
				// 请求失败
				.catch(err=>console.log(err))
			}
		}
	}
</script>

<style>
</style>