VUE的生命周期

1. beforeCreate（初始化之前）

触发时机: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前调用。
应用场景:
    可以在这个阶段进行一些初始化设置，例如初始化非响应式的数据，或者在实例初始化之前进行一些异步操作（如获取初始数据）。
    由于此时还没有初始化 data 和 methods，通常用于配置之前的全局配置或插件的安装。

2. created（初始化之后）

触发时机: 实例已经创建完成后调用。
应用场景:
    在这个阶段可以访问到实例中的数据和方法，适合做一些数据请求和处理的操作。
    可以在这里发起网络请求获取数据，或者进行一些初始的页面渲染逻辑。

3. beforeMount（挂载前）

触发时机: 在挂载开始之前被调用，相关的 render 函数首次被调用。
应用场景:
    可以在这个阶段进行一些准备工作，例如手动创建一些 DOM 元素或者初始化第三方插件等。
    如果需要在渲染之前修改 DOM 结构或者执行一些操作，可以选择在此时进行。

4. mounted（挂载后）

触发时机: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数。
应用场景:
    可以访问到实例挂载后的 DOM，通常用于初始化需要使用 DOM 的操作或者第三方库的初始化。
    如果需要获取元素的位置信息、初始化可视化插件等，可以在这里执行。

5. beforeUpdate（更新前）

触发时机: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
应用场景:
    可以在这个阶段进行一些更新之前的准备工作，例如对数据进行处理或者获取最新的 DOM 状态。
    不推荐在此时更新数据，因为可能会导致无限循环更新。

6. updated（更新后）

触发时机: 数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
应用场景:
    可以在这个阶段进行一些 DOM 相关的操作，例如更新后的 DOM 元素状态的获取或者动画效果的处理。
    由于此时 DOM 已经更新完毕，可以安全地进行 DOM 依赖的操作。

7. beforeDestroy（销毁前）

触发时机: 实例销毁之前调用。
应用场景:
    可以在这个阶段进行一些实例销毁之前的清理工作，例如清除定时器、取消事件监听或者销毁非 Vue 实例的对象。
    如果有一些需要手动清理的资源或者处理未完成的异步操作，可以在此时进行。

8. destroyed（销毁后）

触发时机: 实例销毁后调用。
应用场景:
    可以进行一些最终的清理工作和资源释放操作。
    在这个阶段，Vue 实例的所有东西都被解绑定和销毁，可以释放所有的资源，确保不会产生内存泄漏。

工作流程示例

假设我们需要开发一个简单的 Todo List 应用，来演示生命周期的工作流程：

beforeCreate: 在这个阶段可以进行一些全局配置的初始化，例如设置全局变量或者安装插件。

created: 在这里可以初始化应用程序的状态，例如从服务器获取初始数据。

beforeMount: 可以在这个阶段手动创建一些需要的 DOM 结构，或者初始化第三方 UI 组件。

mounted: 可以在这里访问到挂载后的 DOM，初始化一些需要使用 DOM 的操作，例如添加事件监听或者初始化可视化库。

beforeUpdate 和 updated: 如果用户进行了更新操作，可以在这两个阶段处理数据更新和相应的 UI 更新逻辑。

beforeDestroy: 当用户离开页面或者关闭应用时，可以在这个阶段清理一些资源或者取消一些未完成的网络请求。

destroyed: 最终在实例被销毁后，可以进行一些最终的清理工作，确保释放所有的资源。

常用的三个生命周期

1.created（初始化之后）

template>
  <div>
    <p>倒计时: {{ count }}</p>
    <button @click="stopTimer">停止倒计时</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      timer: null
    };
  },
  created() {
    this.startTimer();
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        this.count++;
      }, 1000);
    },
    stopTimer() {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 清除定时器
    }
  }
};
</script>

在这个例子中，created 钩子被用来初始化 todos 数组，通过异步请求获取了初始的待办事项数据，并且在获取数据后更新了组件的状态。

2.mounted（挂载后）

先下载一下datepicker插件

npm install datepicker --save

<template>
  <div>
    <label for="datepicker">选择日期:</label>
    <input type="text" id="datepicker">
  </div>
</template>

<script>
import 'datepicker/dist/datepicker.css';
import Datepicker from 'datepicker';

export default {
  mounted() {
    new Datepicker('#datepicker', {
      // 日期选择器的配置选项
      autohide: true,
      format: 'yyyy-mm-dd'
    });
  }
};
</script>

在这个例子中，mounted 钩子用来初始化了一个第三方日期选择器，确保在组件挂载到 DOM 后才进行初始化，避免了在渲染之前尝试操作未渲染的 DOM 元素

3.beforeDestroy（销毁前）

假设我们需要在组件销毁前清理一个定时器

<template>
  <div>
    <p>倒计时: {{ count }}</p>
    <button @click="stopTimer">停止倒计时</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      timer: null
    };
  },
  created() {
    this.startTimer();
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        this.count++;
      }, 1000);
    },
    stopTimer() {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 清除定时器
    }
  }
};
</script>

在这个例子中，我们在 beforeDestroy 钩子中清除了组件销毁前的定时器，确保在组件被销毁时不再持续执行定时器操作，避免资源浪费和可能的内存泄漏。