7.Vue进阶 - 8.vue生命周期 - 《Web 前端工程师-2022》

<html>
  <head>
  </head>
  <body>
    <div id="app">
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el:'#app',
      beforeCreate:function(){
        // 页面创建之前
        console.log('beforeCreate');
      },
      created:function(){
        // 页面创建成功
        console.log('created');
      },
      beforeMount:function(){
        // 页面渲染之前
        console.log('beforeMount');
      },
      mounted:function(){
        // 页面渲染完成，网络请求一般在mounted方法中进行。
        console.log('mounted');
      },
      beforeUnmounted:function(){
        // 页面卸载，一般在这里销毁消耗性能的操作，比如定时器
        console.log('mounted');
      },
      Unmounted:function(){
        // 页面已卸载
        console.log('mounted');
      },
      beforeUpdate:function(){
        // 页面更新之前，比如页面数据元素变生了变化，需要更新页面
        console.log('beforeUpdate');
      },
      updated:function(){
        // 页面更新完成
        console.log('updated');
      },
      beforeDestroy:function(){
        // 页面销毁前
        console.log('beforeDestroy');
      },
      destroyed:function(){
        // 页面已经销毁
        console.log('destroyed');
      },
      errorCaptured:function(){
        // 发生错误的处理函数
        console.log('errorCaptured');
      }
    });
  </script>
</html>