Vue【生命周期】

<template>
  <div>
    <h1 class="h1">{{ msg }}</h1>
    <button @click="changeMsg">更新</button>
    <button @click="destroyedFn">销毁</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "例子",
    };
  },
 }

初始化阶段

初始化 生命周期 事件对象
向vue注入了data和methods
data和methods初始化以后
场景: Ajax请求, 注册全局事件

  beforeCreate() {
    console.log("------beforeCreate初始化前------");
    console.log(this.msg);
    console.log(this.$el);
  },

  created() {
    console.log("------created初始化完成------");
    console.log(this.msg);

    //获取不到DOM结构
    console.log(document.querySelector(".h1")); //null
    console.log(this.$el);
  },

挂载阶段

场景：增删改查

  beforeMount() {
    console.log("------beforeMount挂载前触发------");
    console.log(document.querySelector(".h1")); //null
    console.log(this.$el);
  },
  mounted() {
    console.log("------mounted挂载后成功触发------");

    console.log(document.querySelector(".h1"));
    console.log(this.$el);
    //成功获取DOM 增删改查 Ajax请求
    // this.time = setInterval(() => {
    //   console.log("延时器");
    // }, 1000);
  },

更新阶段

  // 前提: data数据改变才执行
  // 更新之前
  beforeUpdate() {
    console.log("------更新前---------");
    console.log(document.querySelector(".h1").innerText);
    console.log(this.$el);
  },
  // 更新之后
  // 场景: 获取更新后的真实DOM
  updated() {
    console.log("------更新后---------");
    console.log(document.querySelector(".h1").innerText);
    console.log(this.$el);
  },

销毁阶段

  beforeDestroy() {
    console.log("------销毁前------");
    //使用场景：销毁全局的事件或定时器
    clearInterval(this.time);
    console.log(this.$el);
  },
  destroyed() {
    console.log("------销毁后------");
    console.log(this.$el);
  },

运行结果