vue生命周期钩子函数

1. vue生命周期：

beforeCreate：在实例初始化后，data observer和event/watcher事件之前被调用=>
created：实例已经创建完成之后调用，挂载阶段未开始，data observer，属性和方法运算，watch/event事件回调已经完成。{用来调用数据，调用方法，调用异步函数}=>
beforeMount：在挂载之前被调用，相关的render函数首次被调用=>
mounted：有初始值的DOM渲染，初始数据渲染完毕在这获取=>
beforeUpdate：数据更新时调用，可以进一步更改状态，不会触发重新渲染=>
updated：组件dom渲染已经更新，可以依赖于dom操作=>
beforeDestory：实例销毁之前=>
destoryed：vue实例销毁之后，解绑，移除监听器，销毁实例

vue生命周期.png

2. 钩子函数异步使用

2.1 created异步

<div id="app">
    <ul>
        <li v-for="(item,index) of list" key="index">{{item}}</li>
    </ul>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            list:['aaaaaaaa','bbbbbbb','ccccccc']
        },
        created:function(){
            consoloe.log('created异步：aaaaa');
            //异步获取数据
            // 因为是异步,就和我们ajax获取数据一样
            setTimeout(()=>{
                this.list=['111','222','333','444'],
                console.log('created异步：',document.getElementsByTagName('li').length);
            },0)
        },
        mounted: function () {
            console.log('mounted:',document.getElementsByTagName('li').length);
        },
        updated: function () {
            console.log('updated:',document.getElementsByTagName('li').length)
        },
    })
</script>

结果：
create: aaaaaaaa
mounted: 3
created异步函数： 3
updated: 4
原因：
可以看到因为是在created的钩子中加入异步函数，所以函数的执行顺序为：
ceated钩子,mounted钩子,异步函数,updated钩子 (根据事件队列原理,只有在updated后，li才是真的DOM渲染为4个，所以异步函数中获取的li的个数时是没有变化的li的个数)。
因为mounted获取到的是我们在Vue的data中设置初始值渲染的DOM，而我们是在异步函数中变化的list数据，所以mounted获取的li的个数为3。
update函数是只要数据vue绑定的数据变化就会触发，所以最后执行，为4
2.2 updated异步

/我们利用异步函数改变了两次list，会发现update被触发了2次
created:function(){
        //异步获取数据
        // 因为是异步,就和我们ajax获取数据一样
        setTimeout(()=>{
             this.list=['111','222','333','444'],
             console.log('created异步：',document.getElementsByTagName('li').length);
        },0)
        setTimeout(()=>{
             this.list=['快乐大本营','脚踏实地','300033','天天向上','好好学习'],
             console.log('created异步：',document.getElementsByTagName('li').length);
        },1000)
},
mounted: function () {
        console.log('mounted:',document.getElementsByTagName('li').length);
},
updated: function () {
        console.log('updated:',document.getElementsByTagName('li').length)
}

输出：
created异步： 3
updated: 4
created异步： 4
updated: 5
2.3 Vue.nextTick对异步函数的结果进行各自的操作

created:function(){
//异步获取数据
// 因为是异步,就和我们ajax获取数据一样

    //为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。
    setTimeout(()=>{
        this.list=['111','222','333','444'],
        console.log('created异步：',document.getElementsByTagName('li').length);
        this.$nextTick(function(){
            console.log("created$nextTick：",document.getElementsByTagName('li').length)
        });
    },0)
    setTimeout(()=>{
        this.list=['快乐大本营','脚踏实地','300033','天天向上','好好学习'],
        console.log('created异步：',document.getElementsByTagName('li').length);
        this.$nextTick(function(){
            console.log("created$nextTick：",document.getElementsByTagName('li').length)
        });
    },1000)
},
mounted: function () {
    console.log('mounted:',document.getElementsByTagName('li').length);
},
updated: function () {
  console.log('updated:',document.getElementsByTagName('li').length)
},

输出：
created异步：3
updated：4
created的nextTick：4
updated：5
created的$nextTick：5

vue生命周期钩子函数