生命周期

0 前言

家人们，终于来到咱们入门学习的最后一关了。

了解完这个，如果各位小伙伴还想要更深入的语法和框架，可以等后续我看时间安排。

而这期是一个十分重要的概念——生命周期。

首先我们得知道一个事情，就是页面最后显示在前端上，是要经历好几个阶段的，比如加载前端代码，加载到页面展示等。

而我们这里说的生命周期，其实也是差不多意思，vue把页面从代码到最后展示分成好几个阶段，分别为创建阶段、更新阶段、销毁阶段等，这几个阶段就组成了页面的生命周期。

那我们知道了这个生命周期有什么用？

可以让我们的开发更加灵活，可以适应更多场景。

比如我们想要给页面添加水印，那我们就可以在页面创建完后的更新阶段添加水印代码，就可以即保证页面代码正常显示，同时可以添加上我们的水印代码。

1 语法

下面是官网描述的整个生命周期，很长，我们一个个举例。

1.1 创建阶段——beforeCreate,created

在 Vue 3 中，<script setup> 语法为编写组件提供了更简洁的方式，但不支持直接使用 beforeCreate ,created这样的函数，因为setup初始化过程中就能实现它们的效果。

1.2 更新阶段——onBeforeMount

当 Vue 框架执行到 onBeforeMount这个阶段时，它已经把我们写的组件和页面要展示的内容“准备好了”，就像是一幅画已经画好但还没有挂在到墙上一样。

想象我们要装饰一间房子，首先准备好了所有的装饰品和家具，这些东西就像是我们编写的 Vue 组件和模板。然后，我们把所有的装饰品、家具摆放在合适的位置，但还没有把它们固定在墙上，也就是说它们还没有真正“挂载”到房间里。

而挂载的概念可以简单理解为，我们设计好页面了，然后把他转化为浏览器实际能够展示的页面内容，这样用户就能看到这些组件，并且可以和它们进行交互。

这个函数适合用于执行一些在实际挂载发生之前需要处理的逻辑。例如，我们可能需要在组件挂载前从后端获取一些数据，或者在挂载前对某些 DOM 元素进行一些操作。

<template>
  <div>
    <h2>{{ message }}</h2>
    <!-- ... -->
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue';
import axios from 'axios';

const message = ref('Before Mount Example');

onBeforeMount(() => {
  // onBeforeMount 类似于 beforeMount 
  console.log('beforeMount hook triggered');

  // 例如，在组件挂载前从后端获取数据
  axios.get('/api/data')
    .then(response => {
      // 处理请求返回的数据
      message.value = response.data.message;
    })
    .catch(error => {
      // 处理请求错误
    });
});
</script>

1.3 更新阶段——onMounted

onMounted在 Vue 实例被挂载到 DOM 后立即被调用。在这个阶段，Vue 实例已经被挂载到 DOM 上，可以访问到挂载后的 DOM 元素，也可以进行 DOM 操作和访问组件的 $el 属性。

onMounted函数适合执行一些需要在组件挂载到 DOM 后进行的操作，比如需要操作 DOM 元素、进行一些初始化的异步请求、启动定时器或监听某些事件等等。

以下是使用 <script setup> 来实现 onMounted的示例

<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const message = ref('Mounted Example');

onMounted(() => {
  // onMounted
  console.log('mounted hook triggered');

  // 这里可以进行一些 DOM 操作
  const title = document.querySelector('h2');
  if (title) {
    title.style.color = 'blue';
  }
});

const updateMessage = () => {
  message.value = 'Updated message';
};
</script>

在这个示例中，使用了 ref 创建了一个响应式的 message 变量，然后在 onMounted中，使用 querySelector 获取到了 h2 标签，并将其文字颜色改为了蓝色。

同时还定义了一个 updateMessage 方法，在点击按钮时更新了 message 变量的值。

1.4 更新阶段——onBeforeUpdate

onBeforeUpdate在数据更新之后、虚拟 DOM 重新渲染之前执行。

在 onBeforeUpdate函数中，我们可以访问到数据变化之前的状态，但此时 DOM 尚未被重新渲染。这个函数适合用来进行一些在数据更新后但未应用到 DOM 的情况下的操作，例如对数据进行处理、对比新旧数据等。

以下是使用 <script setup> 来实现 onBeforeUpdate的示例：

<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script setup>
import { ref, onBeforeUpdate } from 'vue';

const message = ref('BeforeUpdate Example');

onBeforeUpdate(() => {
  // onBeforeUpdate
  console.log('beforeUpdate hook triggered');

  // 在数据更新前执行一些操作
  console.log('Old message:', message.value);
});

const updateMessage = () => {
  message.value = 'Updated message';
};
</script>

在这个示例中，使用 ref 创建了一个响应式的 message 变量，并使用 onBeforeUpdate记录了数据更新前的旧数据，并在控制台输出了旧的 message 值。

同时还定义了一个 updateMessage 方法，在点击按钮时更新了 message 变量的值，触发了数据的更新。这时候 beforeUpdate 函数会在重新渲染之前被调用。

1.5 销毁阶段——onBeforeUnmount

onBeforeUnmount在组件卸载之前被调用。在这个阶段，Vue 实例仍然是完全可用的，但是它所关联的 DOM 元素将要被卸载并销毁。

在 onBeforeUnmount函数中，我们可以执行一些清理操作，例如清除定时器、取消事件监听器、销毁一些手动创建的实例等等。

以下是使用 <script setup> 来实现 onBeforeUnmount的示例：

<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="unmountComponent">Unmount Component</button>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue';

const message = ref('BeforeUnmount Example');

const cleanUp = () => {
  // 在 beforeUnmount 中执行清理操作
  console.log('Cleaning up before unmounting');
  // 可以在这里清除定时器、取消事件监听器等
};

onBeforeUnmount(() => {
  console.log('beforeUnmount hook triggered');
  // 在组件即将被卸载之前执行清理操作
  cleanUp();
});

const unmountComponent = () => {
  cleanUp(); // 也可以在手动卸载组件前执行清理操作
  // 手动卸载组件
  // 可以通过代码将组件从 DOM 中移除，这样会触发 beforeUnmount 
  // 例如：document.getElementById('app').innerHTML = '';
};
</script>

在这个示例中，我们定义了一个 cleanUp 方法，用于执行一些清理操作。然后使用 onBeforeUnmount这个函数中执行了清理操作。

同时还定义了一个 unmountComponent 方法，在点击按钮时手动触发组件的卸载，并在其中调用了 cleanUp 方法。

1.6 销毁阶段——onUnmounted

onUnmounted在组件完全卸载并且与其关联的 DOM 元素被移除之后被调用。在这个阶段，Vue 实例已经完全被销毁，不再可用。

在 onUnmounted函数中，我们不能再访问到 Vue 实例的任何属性或方法，因为它们已经被销毁。这个函数适合进行一些与 Vue 实例无关的清理操作，比如清除一些全局事件监听器、清理手动创建的对象、释放资源等。

以下是使用 <script setup> 来实现 onUnmounted的示例：

<template>
  <div>
    <h2>{{ message }}</h2>
    <button @click="unmountComponent">Unmount Component</button>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue';

const message = ref('Unmounted Example');

const cleanUp = () => {
  // 在 unmounted 中执行清理操作
  console.log('Cleaning up after component is unmounted');
  // 可以在这里进行一些清理工作，如释放资源等
};

onUnmounted(() => {
  // onUnmounted
  console.log('unmounted hook triggered');
  // 组件被卸载后执行清理操作
  cleanUp();
});

const unmountComponent = () => {
  cleanUp(); // 也可以在手动卸载组件前执行清理操作
  // 手动卸载组件
  // 可以通过代码将组件从 DOM 中移除
  // 例如：document.getElementById('app').innerHTML = '';
};
</script>

在这个示例中，我们使用 ref 创建了一个响应式的 message 变量，并使用 onUnmounted 模拟了 unmounted 函数。在这个函数中执行了一些清理操作，例如释放资源、取消事件监听器等。

同时还定义了一个 unmountComponent 方法，在点击按钮时手动触发组件的卸载，并在其中调用了 cleanUp 方法。

2 结语

关于生命周期，理解其实很简单，就是把页面创建、显示和销毁分为很多阶段，然后可以实现更灵活的开发。

但是难点就在于理解每个阶段的使用方法。