Vue生命周期

Vue实例有一个完整的生命周期，即开始创建---》初始化数据---》编译模板---》挂载DOM---》渲染---》更新---》渲染---》销毁等一系列过程，这一系列过程我们称之为Vue实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。

先上一张图来只管的感受一下Vue的生命周期：

Vue生命周期主要以下几个钩子函数：

1、beforeCreate()：

　  我们在实例化Vue的时候（new Vue），会首先初始化事件和生命周期，然后会调用这个钩子函数，这个钩子函数我们一般不会使用它去做太多功能。

　  这个时候，数据data和el还没有挂载到Vue实例上，只是一个空壳，是无法访问到数据data和真实的dom挂载元素el的。

2、created()：

　  在实例创建后，会挂载数据data和绑定事件，完成数据观测。然后会调用created钩子函数，所以此时，实例已经完成了基本配置。

　  这里可以使用数据data，也可以修改数据data，且这里的修改数据是不会触发updated钩子函数的。

      一般可以在这里做数据初始化的操作，不过如果请求过多且全部都是同步请求的话，可能会导致界面出现短暂的空白阻塞，所以是否在这里初始化请求数据，看个人需求。

　　异步请求一般建议写在这里

　  但是dom还是没有挂载到界面，所以$el依旧是不可见的。

　　

3、beforeMount()：

　　实例基本配置完成后，会去判断实例是否有挂载el对象，如果有的话，就继续向下编译，如果没有的话，就停止编译，即意味着停止了生命周期，直到我们在该实例上手动挂载el，即调用vm.$mount("#app")

　  这个钩子函数，我们基本上也是不会去使用它的。

　  它的作用主要是用来检查，Vue实例中有没有自定义template参数选项，如果有的话，会将其作为模板template编译成虚拟dom放到render函数中准备渲染；但是如果我们已经自定义了render函数，会使用我们定义的render函数的返回值渲染到界面；如果都没有，就将挂载元素el的html作为模板template编译。

　　可以看到自定义render函数优先级 > 自定义template参数选项 >  挂载元素el的outer HTML

　　此時，我們就可以理解，为啥要先去判断是否有挂载el对象了，因为我们需要通过el找到对应的out template

　　找到实例或组件对应的模板，编译成虚拟dom放入到render函数中，准备渲染，然后会执行beforeMount钩子函数，这个函数中，虚拟dom已经创建完成，即将渲染。这里我们还可以修改data且不触发updated钩子函数，这将是我们不触发updated钩子函数去修改data的最后一次机会了，后面所有的修改都将触发updated钩子函数。

<div id='app'>{{a}}</div>

new Vue({
    data(){
        return {
            a:100,
        }
    },
    template:"<h1>{{a}}</h1>",
    render(createElement){
        return createElement("h2",{
            attrs:{
                id:"aaa"
            },
            style:{
                border:"1px solid red"
            },
            on:{
                click(){
                    alert(1)
                }
            }
        }，'this is a render fn')
    },
    beforeMount(){
        // 这里会去检查我们是否有自定义render(),有的话，会将render函数的返回值渲染到app中，如果没有render函数，会去查找是否有自定义template，有的话将template值渲染到app中
    }
})

4、mounted()：

　　接下来render后，渲染出真实dom，然后执行mounted()钩子函数。

　　此时，组件已经出现在页面中，数据，真实dom都已经处理好了，事件也已经挂载好了，可以操作真实dom对象了。

　　这里修改数据data，会触发updated钩子，需要注意的是，vue中所有的数据渲染都是异步的，这里我们通过 this.$el.innerHTML 是拿不到更新后的内容的，需要通过vue.$nextTick 去获取

<div id='app'>{{a}}</div>

new Vue({
    el:"#app",
    data(){
        return {
            a:"hello"
        }
    },
    mounted(){
        this.a = 100;
        console.log(this.$el.innerHTML);
        this.$nextTick(()=>{
　　　　　　　// 会在updated钩子函数之后执行
            console.log("nextTick->",this.$el.innerHTML)
        }) 
    }
});

5、beforeUpdate() 和 updated()：

　　当组件和实例中的数据发生变化后，会立即执行beforeUpdate钩子，然后vue的虚拟dom机制会重新创建新的虚拟dom，与上一次的虚拟dom树利用diff算法进行对比后，重新渲染组件。

　　更新完成后，会执行updated钩子，数据和组件都已经更新完成，这是可以操作更新后的dom

　　注意：updated()钩子函数中不能再修改数据，否则会造成死循环

7、beforeDestroy()：

　　当经过某种途径调用$destroy()后（如组件销毁，路由切换或者手动调用vm.$destroy()），在实例销毁之前，会立即触发beforeDestroy钩子。

　　此时实例还是完全可用的。

　　一般在这里做一些清扫工作，如清除定时器，清除非指令绑定事件等等。

<div id="app">
    <self-comp></self-comp>
<div>

<template>
    <div id="selfComp">
        <button @click="destroy">销毁</button>
        <h1>{{count}}</h1>
    </div>
</template>

Vue.component("selfComp",{
    template:"#selfComp",
    data(){
        return {
            count:1,
        }
    },
    timer:null,
    methods:{
        destroy(){
            this.$destroy();
        }
    },
    mounted(){
        this.$options.timer = setInterval(function(){
            this.count+=1;
        }.bind(this),1000);
    },
    beforeDestroy(){
        clearInterval(this.$options.timer);
    }
})

new Vue({}).$mount("#app")