vue 生命周期

vue 生命周期

代码

<template>
  <div>
    324234fasdfsdaf
    <index1></index1>
    <index2></index2>
  </div>
</template>
<script>
import index1 from "./index1";
import index2 from "./index2";
export default {
  components: {
    index1,
    index2,
  },
  data() {
    return {
      message: 10,
    };
  },
  created() {
    // console.log(123123);
  },
  methods: {},
  beforeCreate: function () {
    console.group("------beforeCreate创建前状态------");
    console.log("%c%s", "color:red", "el     : " + this.$el);
    console.log("%c%s", "color:red", "data   : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  created: function () {
    console.group("------created创建完毕状态------");
    console.log("%c%s", "color:red", "el     : " + this.$el);
    console.log("%c%s", "color:red", "data   : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  beforeMount: function () {
    console.group("------beforeMount挂载前状态------");
    console.log("%c%s", "color:red", "el     : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data   : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  mounted: function () {
    console.group("------mounted 挂载结束状态------");
    console.log("%c%s", "color:red", "el     : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data   : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  beforeUpdate: function () {
    console.group("beforeUpdate 更新前状态===============》");
    console.log("%c%s", "color:red", "el     : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data   : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  updated: function () {
    console.group("updated 更新完成状态===============》");
    console.log("%c%s", "color:red", "el     : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data   : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  beforeDestroy: function () {
    console.group("beforeDestroy 销毁前状态===============》");
    console.log("%c%s", "color:red", "el     : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data   : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
  destroyed: function () {
    console.group("destroyed 销毁完成状态===============》");
    console.log("%c%s", "color:red", "el     : " + this.$el);
    console.log(this.$el);
    console.log("%c%s", "color:red", "data   : " + this.$data);
    console.log("%c%s", "color:red", "message: " + this.message);
  },
};
</script>

beforeCreated 创建之前

表示实例完全被创建出来之前vue实例的挂载元素和数据对象data 都为 undefined 还未初始化

created 创建之后

数据对象data已经存在 可以调用methods中的方法 操作data中的数据 但dom未生成

beforeMount 挂在前

vue实例已经加载完成 数据对象data和节点都已经初始化,挂载之前为虚拟的dom节点,模板已经在内存中编辑完成,但是尚未把模板渲染到页面中去

mounted 挂载后

vue 实例挂在完成 虚拟dom已经成功在页面当中,用户可以看到渲染之后的页面

beforeUpdate 更新前

当data中的数据发生变化时 会触发beforeUpdate方法 data数据尚未和最新的数据保持同步

updated 更新后

当data中的数据发生变化时 会触发updated 页面和data数据已经保持同步了

beforeDestory 销毁之前

钩子函数在实例销毁之前调用。在这一步实例仍然可用。destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

destoryed 销毁后

组件销毁之后调用 这个时候页面已经完全被销毁 不能调用data中的数据 vue实例已经解除监听和dom绑定