【vue2.x(三)】vue生命周期

和光同其尘

已于 2022-03-20 22:09:04 修改

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue.js web前端 javascript

于 2022-03-20 18:03:25 首次发布

本文链接：https://blog.csdn.net/zhanyu1/article/details/123617736

版权

vue 专栏收录该内容

7 篇文章 7 订阅

订阅专栏

文章目录

1、vue生命周期
2、钩子函数

1、vue生命周期

vue生命周期： Vue实例从创建到销毁的整个过程。

钩子函数： 在生命周期的不同阶段调用对应的钩子函数，来实现组件数据管理和DOM渲染两大重要功能。即钩子就是在某个阶段给你一个做某些处理的机会。

生命周期图示：

在这里插入图片描述

2、钩子函数

钩子	说明
beforeCreate	创建实例对象之前执行（初始化显示）
created	创建实例对象之后执行（初始化显示）
beforeMount	页面挂载成功之前执行（初始化显示）
mounted	页面挂载成功之后执行（初始化显示）
beforeUpdate	数据更新之前执行（更新状态）
updated	数据更新之后执行（更新状态）
beforeDestroy	实例销毁之前执行（销毁vue实例）
destroyed	实例销毁之后执行（销毁vue实例）

常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

<!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" :x="message">
			<h2>当前的message值是：{{message}}</h2>
			<input type="text" v-model="message"><br><br>
			<ul>
				<li v-for="item in nameList">{{item}}</li>
			</ul><br><br>
			<button @click="destroyVue">销毁vue实例</button>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		const app = new Vue({
			el: '#app',
			data: {
				message: '程序员战羽',
				nameList: ['微信公众号【程序员战羽】1', '微信公众号【程序员战羽】2', '微信公众号【程序员战羽】3']
			},
			methods: {
				destroyVue() {
					console.log('destroyVue...')
					this.$destroy()
				}
			},
			watch: {
				message() {
					console.log('message变了')
				}
			},
			beforeCreate() {
				console.log('实例创建之前,调用beforeCreate')
				console.log(this.$data.message)
			},
			created() {
				console.log('实例创建之后,调用created')
				console.log(this.$data.message)
				console.log('created--li数量：',document.getElementsByTagName('li').length);
			},
			beforeMount() {
				console.log('挂载之前，调用beforeMount')
				console.log(this.$el.innerHTML) // 通过this.$el获取el的DOM元素
				console.log('beforeMount--li数量：',document.getElementsByTagName('li').length);
			},
			mounted() {
				console.log('挂载之后，调用mounted')
				console.log(this.$el.innerHTML)
				console.log('mounted--li数量：',document.getElementsByTagName('li').length);
			},
			beforeUpdate() {
				console.log('更新之前，调用beforeUpdate')
				console.log(this.message)
			},
			updated() {
				console.log('更新之后，调用updated')
				console.log(this.message)
			},
			beforeDestroy() {
				console.log('销毁之前，调用beforeDestroy')
				console.log(this.message)
				console.log(app)
			},
			destroyed() {
				console.log('销毁之后，调用destroyed')
				console.log(this.message)
				console.log(app)
			},
		})
	</script>
</html>

总结：

1、创建前/后：在beforeCreate阶段，data和methods中的数据和方法还未初始化，created完成数据初始化。

2、挂载前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但挂载的是虚拟的dom节点，页面还是旧的。在mounted阶段，vue实例挂载完成，页面成功渲染。
3、更新前/后：当data变化时，会触发beforeUpdate和updated方法。
4、销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。