Vue的生命周期详细介绍

Vue的生命周期

首先，vue的生命周期是个啥？

借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。

vue的生命周期一共有11个，现在我先把它全部列举出来：

(注意：顺序不可以颠倒)

1.beforeCreate — 创建前

2.created — 创建后

3.beforeMount — 挂载前

4.mountde — 挂载后

5.beforeUpdate — 更新前

6.updated — 更新后

7.beforeDestroy — 销毁前

8.destroyed — 销毁后

还有两个要用来配合keep- alive 来使用的：

9.activated–组件激活时调用

10. deactivated–组件停用的时候调用

11. errorCaptured–捕捉子组件错误时调用

    创建前后：实例的创建; 从 创建后（created）开始可以获取data内的数据)
    挂载前后：dom的挂载， 从 挂载后(mounted开始可以获取dom元素)
    

现在我们说一下声明周期函数通常所做的事情：

		beforeCreate： 修改页面的title     页面加载的进度条
		created： 发送网络请求  
		mounted:发送网络请求
		beforeUpdate -- updated 什么更新？视图的更新
		beforeDestroy -- destroyed 
			清除定时任务： setTimeout  setInterval
			移除监听： .removeEventLinster()    this.$bus.$off()

	如果非要在 created内获取dom元素：
		this.$nextTick().then(res=>{
		
		})
		
		this.$nextTick(()=>{
			
		})
	
	errorCaptured捕捉子组件的错误的，有三个参数：
		1. 错误的信息
		2. 错误的组件
		3. 错误的位置
		
		可以返回值： 如果返回true,错误向外暴露，如果返回false 错误隐藏

<script type="text/javascript">
	import mychild from '@/components/child.vue'
	export default {
		data:function(){
			return {
				num: 0
			}
		},
		components:{
			mychild
		},
		errorCaptured(a,b,c) { 
			//  
			console.log('errorCaptured',a,b,c)
			return true
		},
		methods:{
			add(){
				this.num++
				console.log(this.num)
			}
		},
		beforeCreate(){
			document.querySelector('title').innerText = '2111B'
			console.log('beforeCreate',this.num)
			console.log('beforeCreate',document.querySelector('p'))
		},
		created() {
			// console.log('created',this.num)
			// console.log('created',document.querySelector('p'))
			
			this.$nextTick().then(res=>{
				console.log('ref获取--nextTick',this.$refs['hahatag'])
			})
			
			this.$nextTick(()=>{
				console.log('ref获取--nextTick',this.$refs['hahatag'])
			})
			
			setTimeout(()=>{
				console.log('ref获取setTimeout',this.$refs['hahatag'])
			})
		},
		beforeMount() {
			console.log('beforeMount',document.querySelector('p'))
		},
		mounted() {
			console.log('mounted',document.querySelector('p'))
			
			console.log('ref获取',this.$refs['hahatag'])
		},
		beforeUpdate() {
			console.log('beforeUpdate')
			
			
		},
		updated() {
			console.log('updated')
		},
		beforeDestroy(){
			
		},
		destroyed(){
			
		},
		activated() {
			
		},
		deactivated() {
			
		},
		// errorCaptured() {
			
		// }
	}
</script>

我总结的基本上就是上述的这些了，希望可以对各位有所帮助！