Vue生命周期

最新推荐文章于 2024-09-24 08:43:56 发布

友人C君~

最新推荐文章于 2024-09-24 08:43:56 发布

阅读量154

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/CWH0908/article/details/92763727

版权

vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

生命周期钩子=生命周期函数=生命周期事件（创建、运行、销毁）

创建期间四个钩子函数（beforeCreate，created，beforeMount，mounted）

刚开始初始化一个Vue空的实例对象，此时该对象身上只有默认的一些生命周期函数和默认事件，其余未创建。

在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有初始化。

Vue开始编辑模板，执行vue代码中的指令。在内存中生成模板字符串，然后将其渲染为内存中的DOM

在created生命周期函数执行的时候，data和methods数据已被初始化。（调用数据和函数的最早阶段）

内存中渲染好的模板，尚未挂载到页面

beforeMount生命周期函数阶段（挂载之前的阶段），在内存中渲染好的模板，并未将其挂载到页面中（只是之前的模板字符串，如插值表达式，还未替换为真正的内容）

将内存中保存的编译好的模板，真实地挂载到页面中。

mounted生命周期函数阶段，内存中的模板挂载到页面中。（实例创建的最后一个周期，执行完此函数表示实例完全创建好了）

运行阶段两个钩子函数（beforeUpdate，updated）

数据已更新，但是尚未更新页面中的数据显示

beforUpdate生命周期阶段，数据被更新，此时双向数据绑定的页面视图中的内容为未更新。

根据data中最新的数据，在内存中重新渲染一份虚拟DOM树，之后将更新的DOM树重新渲染到页面中，完成数据从data（Model层）->view（视图层）的更新

updated生命周期阶段，完成数据在Model层和View层的更新

销毁阶段两个钩子函数（beforeDestroy，destroyed）

beforeDestroy生命周期阶段，实例上所有的data、methods等所有对象还处于可用状态。（尚未销毁）

destroyed生命周期阶段，销毁实例中所有数据和函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../js/Vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<input type="button" @click="message='change'" value="修改内容" />
			<p>{{message}}</p>
		</div>
		
		<script>
			var vm=new Vue({
				
				el:"#app",
				data:{
					message:"hello world"
				},
				methods:{
					show:function(){
						console.log("show函数调用");
					}
				},
				
				//四个创建生命周期函数(beforeCreate,created,beforeMount,mounted)
				beforeCreate:function(){//Vue内数据和函数未初始化
					console.log("beforeCreate:");
					console.log(this.message);//undefined
					this.show();// Error in beforeCreate hook: "TypeError: this.show is not a function"
				},
				
				created:function(){//已初始化
					console.log("created:");
					console.log(this.message);//hello world
					this.show();// show函数调用
				},
				
				beforeMount:function(){//模板在内存中，未挂载
					console.log("beforeMount:");
					console.log(document.getElementById("app").innerText);// {{message}}
				},
				
				mounted:function(){//已挂载
					console.log("mounted:");
					console.log(document.getElementById("app").innerText);// hello world		
				},
				
				//两个运行阶段生命周期函数(beforeUpdate,updated)
				beforeUpdate:function(){
					console.log("beforeUpdate:");
					console.log("data里的message："+this.message);//chcange
					console.log("页面里的message："+document.getElementById("app").innerText);// hello world		
				},
				
				updated:function(){
					console.log("updated:");
					console.log("data里的message："+this.message);//chcange
					console.log("页面里的message："+document.getElementById("app").innerText);// hello world							
				},
				
				//销毁阶段两个钩子函数（beforeDestroy，destroyed）
				beforeDestroy:function(){
					
				},
				
				destroyed:function(){
					
				}
						
			})
			
		</script>
	</body>
</html>

不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。