青少年编程与数学 02-006 前端开发框架VUE 14课题、生命周期

课题摘要:本文介绍了Vue 3组件的生命周期及其钩子函数，包括创建前、创建后、挂载前、挂载后、更新前、更新后、卸载前和卸载后等阶段。每个阶段都对应特定的生命周期钩子，允许在不同时机执行代码。文章还讨论了错误处理和渲染跟踪的钩子，并通过组合式API中的onBeforeMount、onMounted等函数展示了如何在实际代码中使用这些生命周期钩子。此外，提供了一个应用示例，创建了一个展示组件全生命周期的Vue 3项目，包括详细的注释和控制台日志输出，帮助理解组件从创建到销毁的整个过程。

一、生命周期

Vue组件的生命周期指的是组件从创建到销毁的整个过程，Vue提供了一系列的生命周期钩子，允许我们在不同阶段执行代码。以下是Vue 3中组件生命周期的各个阶段及其对应的钩子函数：

1. 创建前：

   • beforeCreate：在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用。此时组件实例的data、computed等属性还没有被初始化。

2. 创建后：

   • created：在实例创建完成后被立即调用，此时已经完成了数据观测、属性和方法的运算，watch/event事件回调也配置完成，但是组件模板还没开始渲染，$el属性目前还不可见。

3. 挂载前：

   • beforeMount：在挂载开始之前被调用，相关的render函数首次被调用，$el属性即将被创建，但还没有被添加到DOM中。

4. 挂载后：

   • mounted：在el被新创建的vm.$el替换后调用该钩子，此时可以访问到DOM元素。

5. 更新前：

   • beforeUpdate：在数据变化导致虚拟DOM重新渲染和打补丁之前调用，此时可以在这个钩子中进一步地更改状态，这不会触发额外的渲染。

6. 更新后：

   • updated：在由于数据变化导致的虚拟DOM重新渲染和打补丁后调用，此时可以执行依赖于DOM的操作。

7. 卸载前：

   • beforeUnmount：在卸载开始之前调用，此时实例仍然完全可用。

8. 卸载后：

   • unmounted：在实例销毁之前调用。调用后，Vue 的引导程序会清理实例的事件监听器，子组件和子实例的引用，以及解除自定义指令的绑定。该钩子在服务器端渲染期间不被调用。

9. 错误处理：

   • errorCaptured：当捕获一个来自子孙组件的错误时被调用。这允许我们执行一些错误处理逻辑，例如日志记录，或者对UI做出调整。

10. 渲染跟踪：

    • renderTracked：在组件的依赖项被追踪时调用。
    • renderTriggered：在组件的依赖项触发重新渲染时调用。

这些生命周期钩子函数提供了在组件的不同阶段执行代码的机会，使得我们可以在适当的时机进行资源管理、数据获取、DOM操作等操作。在组合式API中，这些生命周期钩子可以通过onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount和onUnmounted等函数来使用。例如：

import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    // 组件挂载后执行
    onMounted(() => {
      console.log('Component is mounted');
    });

    // 组件更新后执行
    onUpdated(() => {
      console.log('Component updated');
    });

    // 组件卸载前执行
    onUnmounted(() => {
      console.log('Component will be unmounted');
    });

    // 返回值将暴露给模板
    return {};
  }
};

了解和正确使用这些生命周期钩子对于构建高效、可维护的Vue应用至关重要。

二、生命周期钩子

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

举例来说，onMounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码：

vue

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

还有其他一些钩子，会在实例生命周期的不同阶段被调用，最常用的是 onMounted、onUpdated 和 onUnmounted。所有生命周期钩子的完整参考及其用法请参考 API 索引。

当调用 onMounted 时，Vue 会自动将回调函数注册到当前正被初始化的组件实例上。这意味着这些钩子应当在组件初始化时被同步注册。例如，请不要这样做：

js

setTimeout(() => {
  onMounted(() => {
    // 异步注册时当前组件实例已丢失
    // 这将不会正常工作
  })
}, 100)

注意这并不意味着对 onMounted 的调用必须放在 setup() 或 <script setup> 内的词法上下文中。onMounted() 也可以在一个外部函数中调用，只要调用栈是同步的，且最终起源自 setup() 就可以。

三、生命周期图示

下面是实例生命周期的图表。你现在并不需要完全理解图中的所有内容，但以后它将是一个有用的参考。来自

四、应用示例

好的，下面是一个使用Vue 3组合式API和Vite创建的项目示例，这个项目将展示组件的全生命周期，并包含详细的注释和说明。

步骤 1：创建Vite项目

首先，确保你已经安装了Node.js和npm/yarn。然后，使用以下命令创建一个新的Vite项目：

# 使用npm
npm create vite@latest my-vue-app -- --template vue

# 或者使用yarn
yarn create vite my-vue-app --template vue

进入项目目录：

cd my-vue-app

步骤 2：安装Vue 3

确保项目使用的是Vue 3：

npm install vue@next

步骤 3：创建生命周期组件

在src目录下创建一个新文件LifecycleComponent.vue。

LifecycleComponent.vue:

<template>
  <div>
    <h1>Lifecycle Component</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref, onBeforeCreate, onCreated, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

// 响应式数据
const message = ref('Component is being created');

// 创建前生命周期钩子
onBeforeCreate(() => {
  console.log('beforeCreate: Component is being initialized');
});

// 创建后生命周期钩子
onCreated(() => {
  console.log('created: Component is instantiated');
  message.value = 'Component is created';
});

// 挂载前生命周期钩子
onBeforeMount(() => {
  console.log('beforeMount: Component is about to be mounted to the DOM');
});

// 挂载后生命周期钩子
onMounted(() => {
  console.log('mounted: Component is mounted to the DOM');
});

// 更新前生命周期钩子
onBeforeUpdate(() => {
  console.log('beforeUpdate: Component is about to be updated');
});

// 更新后生命周期钩子
onUpdated(() => {
  console.log('updated: Component has been updated');
});

// 卸载前生命周期钩子
onBeforeUnmount(() => {
  console.log('beforeUnmount: Component is about to be unmounted');
});

// 卸载后生命周期钩子
onUnmounted(() => {
  console.log('unmounted: Component has been unmounted');
});
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

步骤 4：在App.vue中使用LifecycleComponent

编辑src/App.vue文件，引入并使用LifecycleComponent：

<template>
  <div id="app">
    <lifecycle-component />
  </div>
</template>

<script setup>
import LifecycleComponent from './components/LifecycleComponent.vue';
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

步骤 5：运行项目

使用以下命令启动开发服务器：

npm run dev

# 或者使用yarn
yarn dev

现在，你可以在浏览器中访问http://localhost:3000来查看你的应用。控制台将显示组件的生命周期日志。

项目说明

这个项目包含了一个LifecycleComponent.vue组件，它展示了Vue 3组件的全生命周期。每个生命周期钩子都被注释清楚，并在控制台中打印了相应的日志信息。通过这个项目，你可以了解组件从创建到销毁的整个过程，以及在不同阶段执行的代码。

• onBeforeCreate：在组件实例初始化之前调用，此时组件实例尚未被创建。
• onCreated：在组件实例创建完成后调用，此时组件的数据已经被初始化。
• onBeforeMount：在组件挂载之前调用，此时组件的模板已经被编译成虚拟DOM，但尚未渲染到DOM中。
• onMounted：在组件挂载到DOM后调用，此时可以访问到组件的DOM元素。
• onBeforeUpdate：在组件更新之前调用，此时组件的数据已经变化，但虚拟DOM尚未重新渲染。
• onUpdated：在组件更新后调用，此时组件的DOM已经更新。
• onBeforeUnmount：在组件卸载之前调用，此时组件仍然可用。
• onUnmounted：在组件卸载后调用，此时组件的事件监听器和子组件已经被清除。

通过这个项目，你可以更深入地理解Vue 3组件的生命周期，以及如何在不同阶段执行代码。
nMounted`：在组件挂载到DOM后调用，此时可以访问到组件的DOM元素。

• onBeforeUpdate：在组件更新之前调用，此时组件的数据已经变化，但虚拟DOM尚未重新渲染。
• onUpdated：在组件更新后调用，此时组件的DOM已经更新。
• onBeforeUnmount：在组件卸载之前调用，此时组件仍然可用。
• onUnmounted：在组件卸载后调用，此时组件的事件监听器和子组件已经被清除。

通过这个项目，你可以更深入地理解Vue 3组件的生命周期，以及如何在不同阶段执行代码。