vue生命周期中的钩子函数（全面）

先来看下官方文档的解释：每个vue实例在被创建时都要经过一系列的初始化过程。例如：数据、事件的监听、编译模板，同时在这个过程中，vue会在其中添加一些函数、运行，这些函数叫做生命周期钩子函数。

这里我分了三个阶段说下都有哪一些钩子函数：

阶段一：Vue实例创建阶段的生命周期函数

        beforeCreate：

Vue实例在内存中刚被创建，数据对象（data）和方法（methods）未初始化；

        created：

实例已经在内存中创建好，数据和方法已经初始化完成，但是模板还未编译，页面还是没有内容；（此时访问this.$el 和this.$refs.xxx都是undefined）

        beforeMount： 

找到对应的template模板，编译成render函数，转换成虚拟dom，此时模板已经编译完成，数据未挂载到页面，也就是说在这个阶段你可以看到标签间的双花括号，数据还未渲染到页面中；

补充：

        render : h=>h(App)

在beforeMounte之后和mounted之前，还有渲染render函数，它的作用是把模板渲染成虚拟dom。。。

        mounted：

模板编译好了，虚拟dom渲染成真正的dom标签，数据渲染到页面，此时Vue实例已经创建完毕，如果没有其他操作的话，Vue实例会静静的躺在内存中，一动不动。。。一般会在mounted中来渲染从后端获取的数据！！！！！(页面初始化时，如果有操作dom的事件一般也会放在mounted钩子函数中，当然，你也 可以放在create中，前提需使用this.$nextTick(function(){})，在回调函数中操作dom。)

        先来一个关于$nextTick(fn)的小例子：

<script>
    //下边打印结果顺序： 1  2  3  11
    let vm =  new Vue({
        el:"#app",
        data:{
            name:"lxc"
        },
        beforeCreate(){
        },
        created(){
            console.log("1")
            this.$nextTick(function(){
                console.log("11")
            })
        },
        beforeMount(){
            console.log("2")
        },
        mounted(){
            console.log("3")
        }
    })
</script>

       上边代码充分说明了$nextTick()是在页面渲染完之后执行的一个异步方法。

总结下$nextTick使用场景：

第一：上边已经说了在created中操作dom；

第二：在数据变化后要执行某个操作，而这个操作需要随数据改变进而改变了dom时的操作，这个操作应该放入$nextTick中。

eg：

<div id="app">
   <p ref="op" v-for="i in num" v-if="num > 0">{{i}}</p>
   <button @click="oclick">click</button>
</div>
<script>
    //p标签文本是动态渲染出来的，下边如果想操作p标签文本，需把操作写在$nextTick中
    let vm =  new Vue({
        el:"#app",
        data:{
          num:0
        },
        methods:{
          oclick(){
            this.num = 4
            this.$nextTick(function(){
               this.$refs.op.forEach(ele=>ele.innerText=ele.innerText*2)
            })
          }
        }
    })

</script>

关于$nextTick这篇文章不错：https://www.jianshu.com/p/da2c68fe8aed。。。呃呃呃，有点扯远了，言归正传！！！

 

阶段二：Vue实例运行阶段的生命周期函数

       beforeUpdate：数据依赖改变或者用$forceUpdata强制刷新时，对象data中的 数据已经更改（虚拟dom已经重新渲                                               染），但是，页面中的值还是原来，未改变，因为此时还未开始渲染dom；

       update：此时data中的数据和页面更新完毕，页面已经被重新渲染。。。

     在实际开发中，一般会用watch来代替上边2个方法，因为watch会知道是哪一个数据变化。。。

 

阶段三：Vue实例销毁阶段的生命周期函数

       beforeDestroy：实例销毁前掉用，在此刻实例还是可用的

       destroyed：Vue实例被销毁，观察者、子组件、事件监听被清除（页面数据不会消失，只不过是响应式无效了）。。。

 

总结下：以上三个阶段就是Vue实例的一个完整的生命周期，从开始创建、初始化数据、编译模板、挂载dom、渲染、更新渲染、销毁一系列过程，成为vue生命周期。。。

  下边还是借助vue官方文档中生命周期图在通一遍：