Vue生命周期以及计算属性_计算属性是在哪个生命周期方法里调用的-优快云博客

本文链接：https://blog.youkuaiyun.com/javascipt____/article/details/94715731

本文详细介绍了Vue实例的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等阶段，以及它们在Vue应用中的作用。同时，文章探讨了计算属性的概念，强调了计算属性相对于methods的优势在于其缓存机制，适合处理基于数据的复杂逻辑。

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

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称为Vue的生命周期。
通俗说就是Vue实例从创建到销毁的过程，就是生命周期
在这里插入图片描述

一丶
beforeCreate 创建之前
created创建完成
创建的标志点是New vue()，beforeCreate和created都发生在创建动作之后，但区别在于beforeCreate触发的时候数据还没初始化和绑定，而created的时候就生成好了。

二丶
beforeMount挂载前-
mounted挂载完成
beforeMount和mounted两者主要区别在于模板是否编译和挂载了
①el是用来告诉实例在那个元素上进行挂载。
②beforeMount触发的时候el已经初始化了，但是只是占了坑，挂上了编译前的模板，即虚拟DOM技术（Virtual DOM）
三丶
beforeUpdate更新前
updated更新完毕
加载页面的时候，其实到mounted这里就结束了，更新和销毁并不会触发到。
这里另外写了一个方法去改变message的值，触发更新：
四丶
beforeDestroy销毁前
destroyed销毁完毕
对 vue实例进行销毁。销毁完成后，再重新改变message的值，vue不再对此动作进行响应了。但原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了

下面就是生命周期的代码

<script type="text/javascript">
		var app = new Vue({
			data:{
				info:'你好，前端'
			},
			methods:{
				
			},
			beforeCreate:function(){
				console.group(`---beforeCreate创建之前---`);
				console.log("%c%s","color:red","el为"+this.$el)
				console.log("%c%s","color:red","data为"+this.$data)
				console.log("%c%s","color:red","info为"+this.info)
				console.groupEnd();
			},
			created:function(){
				console.group(`---created创建完成---`);
				console.log("%c%s","color:red","el为"+this.$el)
				console.log("%c%s","color:red","data为"+this.$data)
				console.log("%c%s","color:red","info为"+this.info)
				console.groupEnd();
			},
			beforeMount:function(){
				console.group(`---beforeMount挂载前---`);
				console.log("%c%s","color:red","el为"+this.$el)
				console.log(this.$el)
				console.log("%c%s","color:red","data为"+this.$data)
				console.log("%c%s","color:red","info为"+this.info)
				console.groupEnd();
			},
			mounted:function(){
				console.group(`---mounted挂载完成---`);
				console.log("%c%s","color:red","el为"+this.$el)
				console.log(this.$el) 
				console.log("%c%s","color:red","data为"+this.$data)
				console.log("%c%s","color:red","info为"+this.info)
				console.groupEnd();
			},
			beforeUpdate:function(){
				console.group(`---beforeUpdate更新前---`);
				console.log("%c%s","color:red","el为"+this.$el)
				console.log(this.$el)
				console.log("%c%s","color:red","data为"+this.$data)
				console.log("%c%s","color:red","info为"+this.info)
				console.groupEnd();
			},
			updated:function(){
				console.group(`---updated更新完毕---`);
				console.log("%c%s","color:red","el为"+this.$el)
				console.log(this.$el) 
				console.log("%c%s","color:red","data为"+this.$data)
				console.log("%c%s","color:red","info为"+this.info)
				console.groupEnd();
			},
			beforeDestroy:function(){  
				console.group(`---beforeDestroy销毁前---`);
				console.log("%c%s","color:red","el为"+this.$el)
				console.log(this.$el)
				console.log("%c%s","color:red","data为"+this.$data)
				console.log("%c%s","color:red","info为"+this.info)
				console.groupEnd(); 
				console.groupEnd();
			},
		})
		app.$mount("#app")
	</script>

生命周期小结

创建阶段：主要用于组件创建时，获取数据设置组件。 beforeCreate组件实例刚被创建，组件属性data、el等还未生成
created（能够访问创建成功的组件实例，但不能访问模板，el 或 DOM）
挂载阶段：主要用于访问组件 DOM beforeMount在挂载开始之前被调用，完成了 el 和 data 初始化
mounted（能够访问组件模板，模板挂载完毕，el 被新创建的 vm.$el 替换）
更新阶段：数据变化，组件重新渲染。 beforeUpdate（能够访问组件更新后的数据，但无法访问 DOM）
updated（能够访问 DOM）
销毁阶段：（用于销毁组件，做清理工作） beforeDestory（销毁前还能访问组件实例）
destoryed销毁完毕，销毁实例，清理实例连接，解绑它的全部指令及事件监听器，并不会清除data的数据或者清除dom

在这里插入图片描述

总结

什么是生命周期？从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
生命周期钩子选项/生命周期钩子？就是生命周期事件的别名而已。
（3）生命周期钩子 = 生命周期函数 = 生命周期事件
（4）主要的生命周期函数分类：
①创建期间的生命周期函数
②运行期间的生命周期函数
③销毁期间的生命周期函数
创建期间的生命周期函数：
①beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和
methods 属性
②created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始
编译模板
③beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
④mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
运行期间的生命周期函数：
①beforeUpdate：状态更新之前执行此函数，此时 data
中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
②updated：实例更新完毕之后调用此函数，此时 data 中的状态值和
界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
销毁期间的生命周期函数：
①beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
②destroyed：Vue 实例销毁后调用。调用后，Vue
实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。