vue的生命周期

什么是生命周期

从vue实例创建、运行、到销毁整个过程，总是伴随着各种各样的事件，这些事件统称为生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。

1.实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作

2.挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

3.接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取

4.接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情…

5.当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿

6.当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

7.当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

8.组件的数据绑定、监听去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

生命周期钩子 = 生命周期函数 = 生命周期事件

生命周期分类

Vue生命周期图

创建时期的生命周期事件

beforeCreate(){ }：表示在vue实例刚创建出来，还没有初始化data和methods中的数据。在这个时候无法调用data和methods中的数据；
created(){ }：表示vue已经初始化成功，data和methods也已经创建成功，可以调用里面的数据；
beforeMount(){ }：表示模板字符串已经在内存中编译好了，但还没有挂载到页面上，页面上还是原来的数据；
mounted(){ }：将已经编译好的模板挂载到页面上；

运行期间的生命周期事件

beforeUpdate(){ }：表示data中的数据已经更新成最新的，但是页面上的数据还是旧的数据，因为此时还没有开始重新渲染DOM节点；
updated(){ }:实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了;

销毁期间的生命周期事件

生命周期的最后销毁阶段的钩子函数不是通过手动销毁的,而是通过vue实例自行销毁

beforeDestroy(){ }：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed(){ }：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

下面是一个案例：

<div id="app">
        <p id="p1">{{msg}}</p>
        <input type="button" @click='msg+=123' value="点我">
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'面朝大海'
            },
            methods:{
            },
            beforeCreate(){
            console.log(this.msg);
            },
            created() {
                console.log(this.msg);
            },
            beforeMount() {
                console.log(document.getElementById('p1').innerText);    
            },
            mounted() {
                console.log(document.getElementById('p1').innerText);
            },
            beforeUpdate() {
                console.log(document.getElementById('p1').innerText);
            },
            updated() {
                console.log(document.getElementById('p1').innerText);
            },   
        })
    </script>

可以看到在通过button按钮改变data中msg数据之前，并不会触发到beforeUpdate和updated事件。

而在改变msg的值后，才触发这两个事件