Vue生命周期钩子函数

1. 每个Vue实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子，我们利用这些钩子，可以在合适的时机执行我们的业务逻辑。
2. vue生命周期共分为四个阶段，八个基本钩子函数

<script>
export default {
  data() {
    return {
      filter: "all",
    };
  },
  beforeCreate() {
    console.log("==============" + "beforeCreated" + "===================");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  created() {
    console.log("==============" + "created" + "===================");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  beforeMount() {
    console.log("==============" + "beforeMount" + "===================");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  mounted() {
    console.log("==============" + "mounted" + "===================");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  beforeUpdate() {
    console.log("==============" + "beforeUpdate" + "===================");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  updated() {
    console.log("==============" + "updated" + "===================");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  beforeDestroy() {
    console.log("==============" + "beforeDestroy" + "===================");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  },
  destroyed() {
    console.log("==============" + "destroyed" + "===================");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.filter);
  }
};
</script>

3. vue生命周期图