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