vue 入门：生命周期

vue组件的生命周期

1. 创建阶段、销毁阶段：只会执行一次
2. 更新阶段：会执行多次
   

创建阶段

beforeCreate
在实例初始化之后，数据观测（data observer）和事件配置之前被调用。此时，data 和 methods 中的属性都还未初始化，因此无法访问。
应用场景：通常用于初始化一些不依赖于数据的变量或配置。

created
在实例创建完成后被调用。此时，data 和 methods 已经初始化完成，但 DOM 还未挂载，不能访问到 DOM 元素。
应用场景：适合进行数据初始化、API 请求等操作，但不涉及 DOM 操作。

beforeMount
在挂载开始之前被调用，此时模板已经被编译，但尚未挂载到 DOM 上。可以访问到 this.$el，但 this.$el 还没有被挂载到页面上。
应用场景：适合在挂载之前对模板进行最后的调整。

mounted
在挂载完成后被调用，此时组件已经挂载到 DOM 上，可以访问到 this.$el。
应用场景：适合进行 DOM 操作、绑定事件监听器、调用第三方库等。

更新阶段

beforeUpdate
在数据更新之前被调用，此时组件的 DOM 还未更新，但数据已经发生变化。
应用场景：适合在更新之前进行一些性能优化或数据校验。

updated
在数据更新完成后被调用，此时组件的 DOM 已经更新。
应用场景：适合在更新完成后进行 DOM 操作或清理工作

销毁阶段

beforeDestroy（Vue 2.x）/ beforeUnmount（Vue 3.x）
在销毁之前被调用，此时组件仍然可用，但即将被销毁。
应用场景：适合进行清理工作，如解绑事件监听器、清除定时器等。

destroyed（Vue 2.x）/ unmounted（Vue 3.x）
在销毁完成后被调用，此时组件已经完全销毁，无法再访问。
应用场景：通常用于调试或日志记录。

生命周期钩子函数

Clock.vue

<template>
  <div>
    
    {{ log("render") }}

    {{ now }}

    <button @click="start = !start">{{ start ? "停止" : "开始" }}</button>
    
  </div>
</template>
<script>
import moment from "moment";

export default {
  data: function () {
    console.log("data");
    this.moment = moment;
    this.log = window.console.log;
    return {
      now: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
      start: false
    };
  },
  watch: {
    start() {
      this.startClock();
    }
  },

  // 创建阶段 start
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    console.log("mounted");
    this.startClock();
  },
  // 创建阶段 end


  // 更新阶段 start
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  },
  // 更新阶段 end


  // 销毁阶段 start
  beforeDestroy() {
    console.log("beforeDestroy");
    clearInterval(this.clockInterval);
  },
  destroyed() {
    console.log("destroyed");
  },
  // 销毁阶段 end

  methods: {
    startClock() {
      clearInterval(this.clockInterval);
      if (this.start) {
        this.clockInterval = setInterval(() => {
          this.now = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
        }, 1000);
      }
    }
  }
};
</script>

index.vue

<template>
  <div>
    <a-tabs>
      <a-tab-pane key="clock" tab="时钟">
        <button @click="destroyClock = !destroyClock">
          {{ destroyClock ? "加载时钟" : "销毁时钟" }}
        </button>

        <Clock v-if="!destroyClock"/>
      </a-tab-pane>

    </a-tabs>
  </div>
</template>
<script>
import Clock from "./Clock";

export default {
  components: {
    Clock
  },
  data() {
    return {
      destroyClock: false,
      name: "vue"
    };
  }
};
</script>