VUE中的生命周期钩子函数

钩子就好像是把人的出生到死亡分成一个个阶段，你肯定是在出生阶段起名字，而不会在成年或者死亡的阶段去起名字。或者说你想在出生阶段去约炮，也是不行的。组件也是一样，每个阶段它的内部构造是不一样的,所以一般特定的钩子做特定的事。

一、vue的生命周期的理解

用人举例说明：

1.生命周期就是一个人的一生

从人的出生，到成长，到工作，到死亡，就是人的一生，也叫一个人的生命周期。

2.对象的生命周期

在程序开发中，是要使用对象的。那么，对象的生命周期就是：
从对象的创建，到使用对象，到对象的消亡就是对象的生命周期。

3.vue的生命周期

Vue实例，vue组件实例就是vue对象，也是对象。所以，vue的生命周期和对象的生命周期是同样的道理

二、vue生命周期经历的阶段

生命周期是有不同的阶段的，就像人一样，有幼儿期，童年期，少年期，青年期，中年期，老年期。每个阶段应该做不同的事情，但是每个人做的事情又不尽相同。

Vue对象的生命周期也分不同的阶段，不同的阶段也可以做不同的事情，但是不同的vue（组件）对象在不同的阶段做的事情也不尽相同，所以，每个vue组件的代码不相同。

每一个组件或者实例都会经历一个完整的生命周期：

	beforeCreate () { console.log('准备怀孕') }
	//这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它。
	
    created () { console.log('怀上了')
    //这是遇到的第二个生命周期函数 ，在 created 中，data 和 methods 都已经被初始化好了！
    如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
    
    beforeMount () { console.log('马上生了') },
    //这是遇到的第3个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中，
    在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
    
    mounted () { console.log('生下来了')},
    //这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，
    用户已经可以看到渲染好的页面了 ，
    注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，
    实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中
    
    beforeUpdate () { console.log('改变前') }
    //当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，
    页面尚未和最新的数据保持同步
    
    updated () { console.log('改变后********') },
    //updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
    
    beforeDestroy () { console.log('回光返照中') },
    //销毁之前调用
    
    destroyed () { console.log('销毁****') }
    
	注：beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed这几个钩子函数，
	在服务器端渲染期间不被调用。

1. beforeCreate：

    在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
   

2. created :

   在实例创建完成后被立即调用。
   在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，
   watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
   

3. beforeMount：

   在挂载开始之前被调用：相关的 render 函数首次被调用。
   

4. mounted：

   el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
   如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
   

5. beforeUpdate

   数据更新时调用，发生在虚拟 DOM 打补丁之前。
   这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
   

6. updated

   由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   然而在大多数情况下，你应该避免在此期间更改状态。
   如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
   

7. beforeDestroy

   实例销毁之前调用。在这一步，实例仍然完全可用。
   

8. destroyed

    Vue 实例销毁后调用。调用后，
    Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
   

生命周期图：