Vue（2）- 生命周期钩子

 

<div id="app">
    {{msg}}
</div>
<script type="text/javascript">
    var vm = new Vue({
        el 　　　　　  : '#app',
        data 　　　   : { msg : 'hi vue' },
        beforeCreate : function(){    console.log('beforeCreate');    },
        created      : function(){    console.log('created');         },
        beforeMount  : function(){    console.log('beforeMount');     },
        mounted      : function(){    console.log('mounted');         },
        beforeUpdate : function(){    console.log('beforeUpdate');    },
        updated      : function(){    console.log('updated');         }        
    });
</script>
<!--
    (1)beforeCreate
        在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    (2)created
        在实例创建完成后被立即调用。
        在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
        然而，挂载阶段还没开始，$el 属性目前不可见。
    (3)beforeMount
        在挂载开始之前被调用：相关的渲染函数首次被调用
    (4)mounted
        el 被新创建的 vm.$el 替换, 挂在成功
    (5)beforeUpdate
        数据更新时调用
    (6)updated
        组件 DOM 已经更新, 组件更新完毕
    更多生命周期函数详情查看API    
-->