生命周期钩子

 

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

 

来源：https://www.cnblogs.com/abdusalam10/p/11902133.html