每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
官方网站上的api还有更多周期函数：生命周期API

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

生命周期视图

lifecycle.png