vue-组件嵌套-生命周期执行顺序

最新推荐文章于 2024-05-06 21:48:40 发布

webberQian

最新推荐文章于 2024-05-06 21:48:40 发布

阅读量1k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_40628308/article/details/112257837

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

vue-组件嵌套-生命周期执行顺序

提示：

文章目录

vue-组件嵌套-生命周期执行顺序
前言
一、生命是vue生命周期？
二、生命周期
三、周期执行顺序
总结

前言

提示：主要说明vue组件嵌套之间生命周期的执行顺序：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

一、生命是vue生命周期？

每个Vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期。

注意：
所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。

二、生命周期

vue官方生命周期图

三、周期执行顺序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>
	</head>
	<body>
		<div id="app">
			<component-a />
		</div>
	</body>
	<script>
		Vue.component('component-a', {
			template: '<div><component-b></component-b></div>',
			beforeCreate() {
				console.log('beforeCreate: A');
			},
			created() {
				console.log('created: A');
			},
			beforeMount() {
				console.log('beforeMount: A');
			},
			mounted() {
				console.log('mounted: A');
			},
			beforeDestroy() {
				console.log('beforeDestroy: A');
			},
			destroyed() {
				console.log('destroy: A');
			}
		});

		Vue.component('component-b', {
			template: '<p><component-c></component-c></p>',
			beforeCreate() {
				console.log('beforeCreate: B');
			},
			created() {
				console.log('created: B');
			},
			beforeMount() {
				console.log('beforeMount: B');
			},
			mounted() {
				console.log('mounted: B');
			},
			beforeDestroy() {
				console.log('beforeDestroy: B');
			},
			destroyed() {
				console.log('destroy: B');
			}
		});

		Vue.component('component-c', {
			template: '<span>vue 组件嵌套生命周期测试</span>',
			beforeCreate() {
				console.log('beforeCreate: C');
			},
			created() {
				console.log('created: C');
			},
			beforeMount() {
				console.log('beforeMount: C');
			},
			mounted() {
				console.log('mounted: C');
			},
			beforeDestroy() {
				console.log('beforeDestroy: C');
			},
			destroyed() {
				console.log('destroy: C');
			}
		});

		const app = new Vue({
			el: '#app',
			beforeCreate() {
				console.log('beforeCreate: Root');
			},
			created() {
				console.log('created: Root');
			},
			beforeMount() {
				console.log('beforeMount: Root');
			},
			mounted() {
				console.log('mounted: Root');
			},
			beforeDestroy() {
				console.log('beforeDestroy: Root');
			},
			destroyed() {
				console.log('destroy: Root');
			}
		});
	</script>
</html>

输出结果

beforeCreate: Root
created: Root
 beforeMount: Root
beforeCreate: A
created: A
beforeMount: A
beforeCreate: B
created: B
beforeMount: B
beforeCreate: C
created: C
beforeMount: C
mounted: C
mounted: B
mounted: A
mounted: Root

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

参考链接
 参考链接

webberQian

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue-组件嵌套-生命周期执行顺序

vue-组件嵌套-生命周期执行顺序提示：文章目录vue-组件嵌套-生命周期执行顺序前言一、生命是vue生命周期？二、生命周期三、周期执行顺序总结前言提示：主要说明vue组件嵌套之间生命周期的执行顺序：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。一、生命是vue生命周期？每个Vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期。注意：所有的生命周期钩子自动绑定 this 上下文到实
复制链接

扫一扫