Vue 生命周期与钩子函数—— Vue 学习笔记（一）

最新推荐文章于 2024-05-15 22:49:15 发布

容景

最新推荐文章于 2024-05-15 22:49:15 发布

阅读量189

点赞数

分类专栏： Vue 学习笔记文章标签： vue.js javascript

本文链接：https://blog.csdn.net/ySFRaabbcc/article/details/109589097

版权

Vue 学习笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染—更新—渲染、卸载等一系列过程。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。

同时在这个过程，也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期钩子的 this 指向调用它的 Vue 实例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue 生命周期与钩子函数</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>{{ number }}</p>
		</div>
		<script>
			var app = new Vue({
				el: '#app',
				data: {
					number: '123456'
				},
				beforeCreate: function() {
					console.log("beforeCreate：");
					console.log(this.$el);
					console.log(this.$data);
					console.log(this.number);
					console.log("_________________");
				},
				created: function() {
					console.log("created：");
					console.log(this.$el);
					console.log(this.$data);
					console.log(this.number);
					console.log("_________________");
				},
				beforeMount: function() {
					console.log("beforeMount：");
					console.log(this.$el);
					console.log(this.$data);
					console.log(this.number);
					console.log("_________________");
				},
				mounted: function() {
					console.log("mounted：");
					console.log(this.$el);
					console.log(this.$data);
					console.log(this.number);
					console.log("_________________");
				},
				beforeUpdate: function() {
					console.log("beforeUpdate：");
					console.log(this.$el);
					console.log(this.$data);
					console.log(this.number);
					console.log("_________________");
				},
				updated: function() {
					console.log("update：");
					console.log(this.$el);
					console.log(this.$data);
					console.log(this.number);
					console.log("_________________");
				},
				beforeDestroy: function() {
					console.log("beforeDestroy：");
					console.log(this.$el);
					console.log(this.$data);
					console.log(this.number);
					console.log("_________________");
				},
				destroyed: function() {
					console.log("destroyed：");
					console.log(this.$el);
					console.log(this.$data);
					console.log(this.number);
					console.log("_________________");
				}
			});
		</script>
	</body>
</html>

beforeCreate（实例创建前）：

实例组件刚开始创建，el 和数据都还没有初始化。

created（实例创建后）：

进行初始化事件，进行数据的观测，el 还是没有初始化。

beforeMount（元素挂载前）：

dom 未完成挂载，数据初始化完成，但是数据的双向绑定还是 {{}}，这是因为 Vue 采用了 virtual dom（虚拟 dom）技术。

mounted（元素挂载后）：

完成挂载，将数据渲染进 dom。

beforeUpdate（实例更新前）：

只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据。

updated（实例更新后）：

只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。

beforeDestroy（实例销毁前）：

实例销毁之前调用，在这一步，实例仍然完全可用。

destroyed（实例销毁后）：

Vue 实例销毁后调用，调用后，Vue 实例指示的所有内容都会解除绑定，所有的事件监听器都会被移除，所有的子实例也会被销毁。

容景

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 生命周期与钩子函数—— Vue 学习笔记（一）

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染—更新—渲染、卸载等一系列过程。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。同时在这个过程，也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期钩子的 this 指向调用它的 Vue 实例。<!DOCTYPE html><html> <head> <meta charset="utf-8" />
复制链接

扫一扫

专栏目录