vue-03-3：vue生命周期

                          vue-03-3：vue生命周期

推荐博客地址：https://segmentfault.com/a/1190000008570622?utm_source=tag-newest

一、简介：

官网介绍：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

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

二、图片演示：

原图地址：https://cn.vuejs.org/images/lifecycle.png

中文解释：

原图地址：https://ws1.sinaimg.cn/large/6aedb651gy1fmncxvp4doj20xc2cfaim.jpg

三、代码案例介绍：

<template>
	<div>
		<h1>vue生命周期函数</h1>
		<h3>{{name}}</h3>
		<button type="button" v-on:click="setName">修改</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				name:'yinyuyou',
			};
		},
		methods:{
			setName(){
				this.name = "yuyou";
				console.log("setName："+this.name);
			}
		},
		beforeCreate() {
			console.log("beforeCreate："+this.name);
		},
		created() {
			console.log("created："+this.name);
		},
		beforeMount() {
			console.log("beforeMount："+this.name);
		},
		mounted() {
			console.log("mounted："+this.name);
		},
		beforeUpdate() {
			console.log("beforeUpdate："+this.name);
		},
		updated() {
			console.log("updated："+this.name);
		},
		beforeDestroy() {
			console.log("beforeDestroy："+this.name);
		},
		destroyed() {
			console.log("destroyed："+this.name);
		}
	}
</script>
<style>

</style>

刚开始进入页面打开控制台可见如下结果：

点击修改按钮之后：

在此标签页打开其他页面：

 

created和mounted生命周期方法介绍：

当页面刷新时两种方法都会执行。

created:html加载完成之前，执行。执行顺序：父组件-子组件

mounted:html加载完成后执行。执行顺序：子组件-父组件