Vue的实例和组件的生命周期详解

最新推荐文章于 2022-08-16 13:53:06 发布

来杯仙气儿

最新推荐文章于 2022-08-16 13:53:06 发布

阅读量286

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_46212240/article/details/105081219

版权

了解生命周期的各个部分

Vue中的任何一个实例和组件的产生，都是从new开始的(vue实例我们有new关键词可以看到，组件的new是我们看不到)。他们都会经历下面的过程：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroy这个几个部分，他们也是Vue提供的钩子函数，和data以及methods属于同一个级别，下面我们进行详细的分析。
首先，做好一些准备工作：定义好一个组件，并在页面中调用

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="../base/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="box">
		<example></example>
	</div>
	<template id="example">
		<div id="app">
			<h1 id="title">{{msg}}</h1>
			<p><input type="text" v-model="msg"></p>
		</div>
	</template>
<script type="text/javascript">
Vue.component('example',{
	template:'#example',
	data:function(){
		return {
				msg:'我是msg'
		}
	}
})

1.beforeCreate时期

这个钩子函数，是在new出实例或组件的时候，默认自执行的一个函数，这个时间段，数据没挂载，真实的DOM没有生成，所以拿不到任何的数据，这个钩子函数一般不作操作。

Vue.component('example',{
				template:'#example',
				data:function(){
					return {
							msg:'我是msg'
					}
				},
				//1.beforeCreate钩子函数的使用
				beforeCreate(){
					console.log(this.msg,document.querySelector('h1'))  //我们拿不到msg数据，也拿不到元素，因为这个钩子函数在他们生成之前就触发了
				}

在这里插入图片描述

2.created时期

挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里同步更改数据不会触发updated函数，一般可以在这里做初始数据的获取，也可以发送ajax请求。
我们new出一个vue实例的时候，会有一个data属性，里面存放这个实例中用到的数据，当我们调用的时候，能拿到数据了，但还还是拿不到元素。

created(){
		console.log(this.msg,document.querySelector('h1'))
}

在这里插入图片描述

3.beforeMount时期

开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，这是在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始化数据的获取。

beforeMount(){
	console.log('我是beforeMount函数...',this.msg,document.querySelector('h1'))
}

在这里插入图片描述
这里只是生成了虚拟的DOM结构，真实的还未渲染出来，所以还是拿不到真实的元素。

4.mounted时期

接下来开始render(render函数会默认执行，这里不再展开讲解)，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情。

mounted(){
	console.log('我是mounted函数...',this.msg,document.querySelector('h1'))
},

在这里插入图片描述
在这里，真实的DOM已经生成，可以拿到元素了。

5.beforeUpdate时期

当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿。

6.updated时期

当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的dom。

注意：如果在created时期改变了数据，这里是不会触发的，只有当真实的DOM生成之后，改变了数据，才能出发此钩子函数。

7.beforeDestroy时期

当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等。

8.destroyed时期

组件的数据绑定、监听…去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以。

来杯仙气儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的实例和组件的生命周期详解

了解生命周期的各个部分Vue中的任何一个实例和组件的产生，都是从new开始的(vue实例我们有new关键词可以看到，组件的new是我们看不到)。他们都会经历下面的过程：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroy这个几个部分，他们也是Vue提供的钩子函数，和data以及met...
复制链接

扫一扫