03 Vue3中的生命周期函数

概述

The Vue component lifecycle events happen during a component’s lifecycle, from creation to deletion. They allow us to add callbacks and side effects at each stage of the component’s life when necessary.

Vue 组件生命周期事件发生在组件从创建到删除的生命周期中。必要时，我们可以在组件生命周期的每个阶段添加回调和副作用。

组件事件触发顺序

setup

This event runs before all other hooks, including beforeCreate. It doesn’t have access to this instance since the instance has not yet been created at this point. It is mainly for using Composition API and is treated in the same way Vue treats script setup.

该事件在所有其他钩子（包括 beforeCreate）之前运行。它无法访问此实例，因为此时实例尚未创建。它主要用于使用 Composition API，处理方式与 Vue 处理脚本设置的方式相同。

beforeCreate

This runs when your component has been initialized. data has not been made reactive and events are not set up in your DOM.

该功能在组件初始化时运行，此时数据尚未被反应，DOM 中也未设置事件。

created

You will be able to access reactive data and events, but the templates and DOM are not mounted or rendered. This hook is generally good to use when requesting asynchronous data from a server since you will more than likely want this information as early as possible before the virtual DOM is mounted.

您可以访问反应式数据和事件，但模板和 DOM 不会加载或渲染。一般来说，从服务器请求异步数据时适合使用此钩子，因为您很可能会在虚拟 DOM 挂载之前尽早获得这些信息。

beforeMount

A very uncommon hook, as it runs directly before the first render of your component and is not called Server-Side Rendering.

这是一个非常不常见的钩子，因为它直接运行在组件的第一次渲染之前，而且不称为服务器端渲染。

mounted

Mounting hooks are among the most common hooks you will use since they allow you to access your DOM elements so that non-Vue libraries can be integrated.

安装钩子是您最常用的钩子之一，因为它们允许您访问 DOM 元素，以便集成非 Vue 库。

beforeUpdate

This runs immediately after a change to your component occurs and before it has been re-rendered. It’s useful for acquiring the state of reactive data before it has been rendered.

在组件发生变化后、重新渲染前，它会立即运行。这对于在渲染之前获取反应数据的状态非常有用。

updated

It runs immediately after the beforeUpdate hook and re-renders your component with new data changes.

它在 beforeUpdate 钩子之后立即运行，并根据新的数据变化重新渲染组件。

beforeUnMount

This is fired directly before unmounting your component instance. The component will still be functional until the unmounted hook is called, allowing you to stop event listeners and subscriptions to data to avoid memory leaks. Note this event is called beforeDestroy in Vue 2.x.

该钩子会在卸载组件实例前直接触发。在卸载钩子被调用之前，组件仍将正常运行，从而允许您停止事件侦听器和数据订阅，以避免内存泄漏。请注意，在 Vue 2.x 中，该事件被称为 beforeDestroy。

unmounted

All the virtual DOM elements and event listeners have been cleaned up from your Vue instance. This hook allows you to communicate that to anyone or any element that needs to know this has been done. This event in Vue 2.x is called destroyed.

Vue 实例中的所有虚拟 DOM 元素和事件侦听器都已清理完毕。通过此钩子，您可以将此信息传达给需要知道此操作已完成的任何人或任何元素。在 Vue 2.x 中，该事件被称为 destroyed。

练习：使用Vue生命周期函数控制数据

In this exercise, we will be learning how and when to use Vue’s lifecycle hooks, and when they are triggered by using JavaScript alerts. By the end of the exercise, we will be able to understand and use multiple Vue lifecycle hooks.

在本练习中，我们将学习如何以及何时使用 Vue 的生命周期钩子，以及何时通过使用 JavaScript 警报来触发这些钩子。练习结束时，我们将能够理解并使用多个 Vue 生命周期钩子。

Create a new Vue component file named Exercise1-10.vue in the src/components directory.

在 src/components 目录中新建一个名为 Exercise1-10.vue 的 Vue 组件文件。

修改App.vue，引入该组件并使用：

<script setup>
import Exercise from "./components/Exercise1-10.vue";
script>
<template>
  <Exercise/>
template>

Inside Exercise1-10.vue, we start by creating an array of data to iterate through in a list element, set the key to n, and output the {{item}} value inside of the

element using curly braces:

在 Exercise1-10.vue 中，我们首先创建一个数据数组，在列表元素中进行遍历，将键设置为 n，然后使用大括号在

元素中输出 {{item}} 值：

<template>
  <div>
    <h1>Vue Lifecycle hooksh1>
    <ul>
      <li v-for="(item, n) in list" :key="n">
        {{ item }}
      li>
    ul>
  div>
template>
<script>
export default {
  data() {
    return {
      list: [
        'Apex Legends',
        'A Plague Tale: Innocence',
        'ART SQOOL',
        'Baba Is You',
        'Devil May Cry 5',
        'The Division 2',
        'Hypnospace Outlaw',
        'Katana ZERO',
      ],
    }
  }
}
script>

Add beforeCreated() and created() as properties below the data() function. Set an alert or console log inside these hooks so that you can see when they are being triggered:

在 data() 函数下方添加 beforeCreated() 和 created() 作为属性。在这些钩子中设置警报或控制台日志，以便查看它们何时被触发：

<script>
export default {
  data() {
    return {
      list: [
        'Apex Legends',
        'A Plague Tale: Innocence',
        'ART SQOOL',
        'Baba Is You',
        'Devil May Cry 5',
        'The Division 2',
        'Hypnospace Outlaw',
        'Katana ZERO',
      ],
    }
  },
  beforeCreate() {
    alert('beforeCreate: data is static, thats it')
  },
  created() {
    alert('created: data and events ready, but no DOM')
  },
}
script>

Define beforeMount() and mounted() in the same way as in step 6. Set an alert or console log inside of these hooks so that you can see when they are being triggered:

以与步骤 6 相同的方式定义 beforeMount() 和 mounted()。在这些钩子中设置警报或控制台日志，以便查看它们何时被触发：

<script>
export default {
  data() {
    return {
      list: [
        'Apex Legends',
        'A Plague Tale: Innocence',
        'ART SQOOL',
        'Baba Is You',
        'Devil May Cry 5',
        'The Division 2',
        'Hypnospace Outlaw',
        'Katana ZERO',
      ],
    }
  },
  beforeCreate() {
    alert('beforeCreate: data is static, thats it')
  },
  created() {
    alert('created: data and events ready, but no DOM')
  },
  beforeMount() {
    alert('beforeMount: $el not ready')
  },
  mounted() {
    alert('mounted: DOM ready to use')
  },
}
script>

Add a new button element inside your

element that renders the item output. Use a @click directive to bind this button to a method called deleteItem and pass the item value as an argument:

在

元素中添加一个新的按钮元素，用于渲染项目输出。使用 @click 指令将此按钮绑定到名为 deleteItem 的方法，并将项目值作为参数传递：

<template>
  <div>
    <h1>Vue Lifecycle hooksh1>
    <ul>
      <li v-for="(item, n) in list" :key="n">
        {{ item }}
        <button @click="deleteItem(item)">Deletebutton>
      li>
    ul>
  div>
template>

Add a method called deleteItem into a methods object above your hooks but below the data() function. Inside this function, pass value as an argument and filter out items from the list array based on this value. Then, replace the existing list with the new list:

在方法对象中添加名为 deleteItem 的方法，该方法位于钩子之上，但低于 data() 函数。在此函数中，将值作为参数传递，并根据此值从列表数组中筛选出项目。然后，用新列表替换现有列表：

<script>
export default {
  data() {
    return {
      list: [
        'Apex Legends',
        'A Plague Tale: Innocence',
        'ART SQOOL',
        'Baba Is You',
        'Devil May Cry 5',
        'The Division 2',
        'Hypnospace Outlaw',
        'Katana ZERO',
      ],
    }
  },
  beforeCreate() {
    alert('beforeCreate: data is static, thats it')
  },
  created() {
    alert('created: data and events ready, but no DOM')
  },
  beforeMount() {
    alert('beforeMount: $el not ready')
  },
  mounted() {
    alert('mounted: DOM ready to use')
  },
  methods: {
    deleteItem(value) {
      this.list = this.list.filter(item => item !==
          value)
    },
  },
}
script>

Add beforeUpdate() and updated() as functions same as in step 9 and set an alert or console log inside them:

添加 beforeUpdate() 和 updated() 作为与步骤 9 相同的函数，并在其中设置警报或控制台日志：

<script>
export default {
  data() {
    return {
      list: [
        'Apex Legends',
        'A Plague Tale: Innocence',
        'ART SQOOL',
        'Baba Is You',
        'Devil May Cry 5',
        'The Division 2',
        'Hypnospace Outlaw',
        'Katana ZERO',
      ],
    }
  },
  beforeCreate() {
    alert('beforeCreate: data is static, thats it')
  },
  created() {
    alert('created: data and events ready, but no DOM')
  },
  beforeMount() {
    alert('beforeMount: $el not ready')
  },
  mounted() {
    alert('mounted: DOM ready to use')
  },
  beforeUpdate() {
    alert('beforeUpdate: we know an update is about to happen, and have the data')
  },
  updated() {
    alert('updated: virtual DOM will update after you click OK')
  },
  methods: {
    deleteItem(value) {
      this.list = this.list.filter(item => item !==
          value)
    },
  },
}
script>

When you delete a list item by clicking on the Delete button in your browser, you should see these alerts. For example, when deleting the first item in the list, beforeUpdated will trigger.

点击浏览器中的删除按钮删除列表项时，应该会看到这些警报。例如，删除列表中的第一个项目时，beforeUpdated 将触发.

Continue adding beforeUnmount() and unmounted() to the component options as function properties. Set an alert or console log inside these hooks so that you can see when they are being triggered.

继续在组件选项中添加 beforeUnmount() 和 unmounted() 作为函数属性。在这些钩子中设置警报或控制台日志，以便查看它们何时被触发。

<script>
export default {
  data() {
    return {
      list: [
        'Apex Legends',
        'A Plague Tale: Innocence',
        'ART SQOOL',
        'Baba Is You',
        'Devil May Cry 5',
        'The Division 2',
        'Hypnospace Outlaw',
        'Katana ZERO',
      ],
    }
  },
  beforeCreate() {
    alert('beforeCreate: data is static, thats it')
  },
  created() {
    alert('created: data and events ready, but no DOM')
  },
  beforeMount() {
    alert('beforeMount: $el not ready')
  },
  mounted() {
    alert('mounted: DOM ready to use')
  },
  beforeUpdate() {
    alert('beforeUpdate: we know an update is about to happen, and have the data')
  },
  updated() {
    alert('updated: virtual DOM will update after you click OK')
  },
  beforeUnmount() {
    alert('beforeUnmount: about to blow up this component')
  },
  unmounted() {
    alert('unmounted: this component has been destroyed')
  },
  methods: {
    deleteItem(value) {
      this.list = this.list.filter(item => item !==
          value)
    },
  },
}
script>

In this exercise, we learned what Vue lifecycle hooks are, when they trigger, and in what order they trigger. This will be useful in combination with triggering methods and controlling data within your Vue components.

在本练习中，我们了解了什么是 Vue 生命周期钩子、何时触发以及触发顺序。这将有助于在 Vue 组件中结合触发方法和控制数据。