Vue.js生命周期详解及实例应用-优快云博客

本文链接：https://blog.youkuaiyun.com/PengK_aha/article/details/128095484

1.主要阶段

       挂载（初始化相关属性）
           1. beforeCreate
           2. created
           3. beforeMount
           4. mounted
       更新（元素或组件的变更操作）
           1. beforeUpdate
           2. updated
       销毁（销毁相关属性）
           1. beforeDestroy
           2. destroyed

2.Vue实例的产生过程

       1. beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用
       2. created在实例创建完成后被立即调用
       3. beforeMount在挂载开始之前被调用
       4. mounted被新创建的vm.$el 替换，并挂载到实例上去之后调用该钩子
       5. beforeUpdate数据更新时调用，发生在虚拟DOM打补丁之前
       6. updated由于数据更改导致的虚拟DOM重新渲染和打补丁，在这儿之后会调用该钩子
       7. beforeDestroy实例销毁之前调用
       8. destroyed 实例销毁后调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>{{msg}}</div>
			<button @click="update">更新</button>
			<button @click="destroy">销毁</button>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	生命周期
	1.主要阶段
		挂载（初始化相关属性）
			1. beforeCreate
			2. created
			3. beforeMount
			4. mounted
		更新（元素或组件的变更操作）
			1. beforeUpdate
			2. updated
		销毁（销毁相关属性）
			1. beforeDestroy
			2. destroyed
	
	2.Vue实例的产生过程
		1. beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用
		2. created在实例创建完成后被立即调用
		3. beforeMount在挂载开始之前被调用
		4. mounted被新创建的vm.$el 替换，并挂载到实例上去之后调用该钩子
		5. beforeUpdate数据更新时调用，发生在虚拟DOM打补丁之前
		6. updated由于数据更改导致的虚拟DOM重新渲染和打补丁，在这儿之后会调用该钩子
		7. beforeDestroy实例销毁之前调用
		8. destroyed 实例销毁后调用
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
			},
			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");
			},
			methods: {
				update: function() {
					this.msg = '窗外的麻雀';
				},
				destroy: function(){
					this.$destroy();
				}
			}
		});
	</script>
</html>