Vue-06-vue生命周期-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47402645/article/details/106840453

Vue-06-vue生命周期

每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。

在这里插入图片描述

分析

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>

<body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Vue的生命周期'
      },
      beforeCreate: function () {
        console.log('------beforeCreate创建前状态------');
        console.log("el     : " + this.$el); //undefined
        console.log("data   : " + this.$data); //undefined 
        console.log("message: " + this.message)
      },
      created: function () {
        console.log('------created创建完毕状态------');
        console.log("el     : " + this.$el); //undefined
        console.log("data   : " + this.$data); //已被初始化 
        console.log("message: " + this.message); //已被初始化
      },
      beforeMount: function () {
        console.log('------beforeMount挂载前状态------');
        console.log("el     : " + (this.$el)); //已被初始化
        console.log("data   : " + this.$data); //已被初始化  
        console.log("message: " + this.message); //已被初始化  
      },
      mounted: function () {
        console.log('------mounted 挂载结束状态------');
        console.log("el     : " + this.$el); //已被初始化
        console.log("data   : " + this.$data); //已被初始化
        console.log("message: " + this.message); //已被初始化 
      },
      beforeUpdate: function () {
        console.log('beforeUpdate 更新前状态===============》');
        console.log("el     : " + this.$el);
        console.log("data   : " + this.$data);
        console.log("message: " + this.message);
      },
      updated: function () {
        console.log('updated 更新完成状态===============》');
        console.log("el     : " + this.$el);
        console.log("data   : " + this.$data);
        console.log("message: " + this.message);
      },
      beforeDestroy: function () {
        console.log('beforeDestroy 销毁前状态===============》');
        console.log("el     : " + this.$el);
        console.log("data   : " + this.$data);
        console.log("message: " + this.message);
      },
      destroyed: function () {
        console.log('destroyed 销毁完成状态===============》');
        console.log("el     : " + this.$el);
        console.log("data   : " + this.$data);
        console.log("message: " + this.message);
      }
    })
  </script>
</body>

</html>