专业的编程技术博客社区

网站首页 > 博客文章 正文

Vue.js教程(四)--Vue的生命周期（vue生命周期及使用）

baijin 2024-10-09 07:57:10 博客文章 6 ℃ 0 评论

1. 简介

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

new Vue({
 data: {
 a: 1
 },
 created: function () {
 // `this` 指向 vm 实例
 console.log('a is: ' + this.a)
 }
})
// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

2. Vue的生命周期图

3. 示例

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>
	<body>
		<div class="mui-content" id="content">
			<div>{{msg}}</div>
			<button @click="updateMsg()">更新组件数据</button>
			<button @click="destroyVue()">销毁Vue实例</button>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			mui.init();
			var vm=new Vue({
				el:"#content",
				data:{
					msg:"组件生命周期！"
				},
				methods:{
					updateMsg:function(){
						this.msg="组件数据更新!"
					},
					destroyVue:function(){
						this.$destroy();//销毁Vue组件方法
					}
				},
				beforeCreate() {
					alert("组件实例刚刚创建，还未进行数据观测和事件配置");
				},
				created() {//常用!
					alert("组件已经创建完成，并且已经进行了数据观测和事件配置");
				},
				beforeMount() {
					alert("模板编译之前，还未挂载");
				},
				mounted() {//常用!
					alert("模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上的数据展示内容");
				},
				beforeUpdate() {
					alert("组件更新之前");
				},
				updated() {
					alert("组件更新之后");
				},
				beforeDestroy() {
					alert("组件销毁之前");
				},
				destroyed() {
					alert("组件销毁之后");
				}
			})
		</script>
	</body>
</html>

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表