【Vue.js】生命周期的执行顺序_vue js执行顺序-优快云博客

本文链接：https://blog.youkuaiyun.com/Handsome_gir/article/details/105645618

本文详细解析了Vue.js的生命周期，包括挂载、更新和销毁三个阶段的钩子函数。通过实例展示了beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等钩子函数的调用时机。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

挂载(初始化相关属性)：beforeCreate、created、beforeMount、mounted
更新(元素或组件的变更操作)：beforeUpdate、updated
销毁(销毁相关属性)：beforeDestroy、destroyed

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>生命周期</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
			<button @click="update">更新</button>
			<button @click="destroy">销毁</button>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					msg:"生命周期"
				},
				methods:{
					//更新
					update:function(){
						this.msg="你好"
					},
					//销毁
					destroy:function(){
						this.$destroy();
					}
				},
				//在实例初始化之后，数据观测和事件配置之前被调用
				beforeCreate:function(){
					console.log("beforeCreate");
				},
				//在实例创建完成后被立即调用
				created:function(){
					console.log("created");
				},
				//在挂载开始之前被调用
				beforeMount:function(){
					console.log("beforeMount");
				},
				//挂载到实例之后调用该钩子
				mounted:function(){
					console.log("mounted");
				},
				//数据更新时被调用，发生在虚拟DOM打补丁之前
				beforeUpdate:function(){
					console.log("beforeUpdate");
				},
				//由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子
				updated:function(){
					console.log("updated");
				},
				//实例销毁之前调用
				beforeDestroy:function(){
					console.log("beforDestroy");
				},
				//实例销毁后调用
				destroyed:function(){
					console.log("destroyed");
				}
			});
		</script>
	</body>
</html>