vue总结02--vue的生命周期

什么是生命周期？

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实 例挂载到 DOM 并在数据变化时更新 DOM 等，称为Vue实例的生命周期。

---

---

生命周期视图

---

结论：
三个阶段：初始化、更新、销毁
初始化：beforeCreate、created、beforeMount、mounted
更新：beforeUpdate、updated
销毁：beforeDestroy、destroyed

一、使用场景

{

beforeCreate(){} // 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务

created(){} // 组件初始化完毕，各种数据可以使用，常用于异步数据获取

beforeMount(){} // 未执行渲染、更新，dom未创建

mounted(){} // 初始化结束，dom已创建，可用于获取访问数据和dom元素

beforeUpdate(){} // 更新前，可用于获取更新前各种状态

updated(){} // 更新后，所有状态已是最新

beforeDestroy(){} // 销毁前，可用于一些定时器或订阅的取消

destroyed(){} // 组件已销毁，作用同上
}

二、测试代码

代码如下（示例）：

 // 创建实例        
const app = new Vue({            
	el: '#demo',            
	data:{
	      foo: 'foo'            
	},            
	beforeCreate(){
		console.log('beforeCreate')
	},            
	created(){
		console.log('created '+this.$el)
	},            
	beforeMount(){
		console.log('beforeMount')
	},            
	mounted(){     
	    setTimeout(() => {       
	        this.foo = '777777'
	    }, 2000);
	    console.log('mounted '+this.$el)
   },            
   beforeUpdate(){
   		console.log('beforeUpdate')
   },            
   updated(){
   		console.log('updated')
   },    
   beforeDestroy(){
		console.log('beforeDestroy')
   }，   
   destroyed(){
		console.log('destroyed')
   }
   });