【Vue 快速入门系列】生命周期函数简要介绍

酷尔。

于 2022-11-03 17:06:03 发布

阅读量886

点赞数 4

分类专栏：网页前端高级编程从入门到精通文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/apple_51931783/article/details/127561196

版权

网页前端高级编程从入门到精通专栏收录该内容

59 篇文章 22 订阅

订阅专栏

文章目录

前言

生命周期函数是必要的，有了生命周期函数可以大大简化我们的操作，可以做一些我们平时做不到的事，本篇文章对声明周期函数做一个简要的介绍，并使用一个实例告诉大家，生命周期函数的重要性。

简介生命周期函数

1.又名：生命周期回调函数、生命周期钩子。
2.Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或组件实例对象。
下图来源张天禹老师。

在这里插入图片描述

都有哪些生命周期函数

注意点：

常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

其余生命周期钩子及作用：

// 初始化数据代理、数据检测之前（在这看不到_data等属性，很多属性并未初始化、一般为null）
beforeCreate() {
	console.log('beforeCreate')
},
// 创建完数据代理、数据检测之后执行（在这可以看到_data等属性，很多属性完成初始化）
created() {
	console.log('created')
},
// 这个函数执行的时候Dom元素还是没经过vue编译的元素，在这个函数中对dom元素操作最终都不奏效
beforeMount() {
	console.log('beforeMount')
},
// dom中的元素经过了vue对象编译，这个函数中所有的操作均奏效。
mounted() {
	console.log('mounted')
},
// 数据更新前的操作（此时数据更新之后还没有同步到dom中）
beforeUpdate() {
	console.log('beforeUpdate')
},
// 数据更新后的操作
updated() {
	console.log('updated')
},
// 销毁前执行的函数（在这里面执行的修改将不起作用，但是依旧可用）
// 使用vue.$destroy()销毁vue对象
beforeDestroy() {
	console.log('beforeDestroy')
},
//已销毁
destroyed() {
	console.log('destroyed')
},
//下面两个钩子是组件激活与失活钩子（组件不展示的话会被销毁掉）
activated() {
	console.log('News组件被激活了')
	this.timer = setInterval(() => {
		console.log('@')
		this.opacity -= 0.01
		if(this.opacity <= 0) this.opacity = 1
	},16)
},
//组件失活可以进行关闭定时器等操作
deactivated() {
  console.log('News组件失活了')
  clearInterval(this.timer)
},

为什么要有生命周期函数

假设现在要实现一个效果，当页面挂载完毕后页面内的文字由不透明转向透明，实现的方式是通过定时器实现，如果不使用生命周期函数，而使用普通函数，将会导致无限开启定时器，因为定时器定义在函数内，而我们调用函数需要在模板内，定时器修改数据之后会触发模板解析，模板解析后会再次触发一个定时器。周而复始，将会开启很多定时器。如果在DOM元素挂载完毕后的声明周期函数内开启定时器，只会开启一个，而且定时器改变数据之后触发模板解析不会再开启新的定时器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>引出生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2 v-if="a">你好啊</h2>
			<h2 :style="{opacity}">欢迎学习Vue</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		 new Vue({
			el:'#root',
			data:{
				a:false,
				opacity:1
			},
			methods: {
				// 可以通过创建一个函数，并在模板中调用函数的方式进行实现
                // 但是这种方法会使函数分裂执行，函数增长应为指数级
                // 原因是函数中涉及到了模板中属性的修改，修改之后vue对象会在此更新并解析模板，
                // 模板就又一次调用函数，如此反复使得定时器函数执行的次数超级超级多（也就是同时存在很多个定时器函数在运行）
			},
			//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
			mounted(){
				console.log('mounted',this)
				setInterval(() => {
					this.opacity -= 0.01
					if(this.opacity <= 0) this.opacity = 1
				},16)
			},
		})

		//通过外部的定时器实现（不推荐）
		/* setInterval(() => {
			vm.opacity -= 0.01
			if(vm.opacity <= 0) vm.opacity = 1
		},16) */
	</script>
</html>