vue 生命周期

最新推荐文章于 2022-10-31 10:18:26 发布

夜已如歌_ok

最新推荐文章于 2022-10-31 10:18:26 发布

阅读量313

点赞数

分类专栏： vue 文章标签： vue生命周期

本文链接：https://blog.csdn.net/zxl1990_ok/article/details/103190920

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

先看vue官网生命周期图示：

vue生命周期

使用的是2.6.10版本的vuejs

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="https://unpkg.com/vue"></script>
	</head>
	<body>
		<div id="app">{{msg}}</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				msg: 'this is vue!'
			},
			beforeCreate() {
				console.log('beforeCreate创建前：');
				console.log('msg: ' + this.msg);
				console.log('data: ' + this.$data);
				console.log('el: ' + this.$el);
			},
			created() {
				console.log('created 创建完:');
				console.log('msg: ' + this.msg);
				console.log('data: ' + this.$data);
				console.log('el: ' + this.$el);
			},
	        beforeMount: function () {
	            console.log('beforeMount 挂载前:');
				console.log('msg: ' + this.msg);
				console.log('data: ' + this.$data);
				console.log('el: ' + this.$el, this.$el);
	        },
	        mounted: function () {
	            console.log('mounted 挂载结束:');
				console.log('msg: ' + this.msg);
				console.log('data: ' + this.$data);
				console.log('el: ' + this.$el, this.$el);
	        },
	        beforeUpdate: function () {
	            console.log('beforeUpdate 更新状态前:');
				console.log('msg: ' + this.msg);
				console.log('data: ' + this.$data);
				console.log('el: ' + this.$el, this.$el);
	        },
	        updated: function () {
	            console.log('updated 更新状态结束后:');
				console.log('msg: ' + this.msg);
				console.log('data: ' + this.$data);
				console.log('el: ' + this.$el, this.$el);
	        },
	        beforeDestroy: function () {
	            console.log('beforeDestroy 销毁前:');
				console.log('msg: ' + this.msg);
				console.log('data: ' + this.$data);
				console.log('el: ' + this.$el, this.$el);
	        },
	        destroyed: function () {
	            console.log('destroyed 销毁后:');
				console.log('msg: ' + this.msg);
				console.log('data: ' + this.$data);
				console.log('el: ' + this.$el, this.$el);
	        }
		});
	</script>
</html>

执行结果如下图：

在控制台输入app.msg='update test'，响应结果如下：

销毁阶段：

此时如果我们在控制台再次输入app.msg='this is vue'，发现不会响应了。

夜已如歌_ok

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 生命周期

先看vue官网生命周期图示：使用的是2.6.10版本的vuejs<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="https://u...
复制链接

扫一扫

专栏目录