Vue 实例的生命周期

生命周期（Vue2）

1. 主要阶段

挂载（初始化相关属性）

① beforeCreate

② created

③ beforeMount

④ mounted
更新（元素或组件的变更操作）

① beforeUpdate

② updated
销毁（销毁相关属性）

① beforeDestroy

② destroyed

2. Vue实例的产生过程

① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。

② created 在实例创建完成后被立即调用。

③ beforeMount 在挂载开始之前被调用。

④ mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。

⑤ beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。

⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。

⑦ beforeDestroy 实例销毁之前调用。

⑧ destroyed 实例销毁后调用。

  
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{msg}}</div>
    <button @click='update'>更新</button>
    <button @click='destroy'>销毁</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      Vue实例的生命周期
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '生命周期'
      },
      methods: {
        update: function(){
          this.msg = 'hello';
        },
        destroy: function(){
          this.$destroy();
        }
      },
      beforeCreate: function(){
        console.log('beforeCreate');
      },
      created: function(){
        console.log('created');
      },
      beforeMount: function(){
        console.log('beforeMount');
      },
      mounted: function(){
        console.log('mounted');
      },
      beforeUpdate: function(){
        console.log('beforeUpdate');
      },
      updated: function(){
        console.log('updated');
      },
      beforeDestroy: function(){
        console.log('beforeDestroy');
      },
      destroyed: function(){
        console.log('destroyed');
      }
    });
  </script>
</body>
</html>

posted @ 2021-09-24 15:53 一纸年华阅读(49) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

公告

潜藏于波涛下寂静无声

跃升于惊涛上乘风化龙...猫

昵称：一纸年华
园龄： 6年11个月
粉丝： 12
关注： 14

+加关注

2025年3月

日

一

二

三

四

五

六

一纸年华

潜藏于波涛下寂静无声，跃升于惊涛上乘风化龙

Vue 实例的生命周期

生命周期（Vue2）

1. 主要阶段

2. Vue实例的产生过程

公告

潜藏于波涛下寂静无声

跃升于惊涛上乘风化龙...猫

搜索

常用链接

我的标签

合集 (5)

随笔分类 (230)

随笔档案 (229)

相册 (12)

阅读排行榜

评论排行榜

最新评论

目录导航


	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	</head>
	<body>
	<div id="app">
	<div>{{msg}}</div>
	<button @click='update'>更新</button>
	<button @click='destroy'>销毁</button>
	</div>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript">
	/*
	Vue实例的生命周期

	*/
	var vm = new Vue({
	el: '#app',
	data: {
	msg: '生命周期'
	},
	methods: {
	update: function(){
	this.msg = 'hello';
	},
	destroy: function(){
	this.$destroy();
	}
	},
	beforeCreate: function(){
	console.log('beforeCreate');
	},
	created: function(){
	console.log('created');
	},
	beforeMount: function(){
	console.log('beforeMount');
	},
	mounted: function(){
	console.log('mounted');
	},
	beforeUpdate: function(){
	console.log('beforeUpdate');
	},
	updated: function(){
	console.log('updated');
	},
	beforeDestroy: function(){
	console.log('beforeDestroy');
	},
	destroyed: function(){
	console.log('destroyed');
	}
	});
	</script>
	</body>
	</html>