25 在Vue3中使用生命周期函数-编程知识

25 在Vue3中使用生命周期函数

概述

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

组件事件触发顺序

setup

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

beforeCreate

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

created

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

beforeMount

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

mounted

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

beforeUpdate

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

updated

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

beforeUnMount

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

unmounted

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

基本用法

我们创建src/components/Demo25.vue，在这个组件中，我们要：

1：实现mounted生命周期方法
2：实现beforeMount方法

代码如下：

<script setup>
import {onBeforeMount, onMounted} from "vue";onMounted(() => {alert("实现mounted生命周期方法")
})
onBeforeMount(() => {alert("实现beforeMount方法")
})
</script>
<template><div><h3>演示生命周期方法</h3></div>
</template>

接着，我们修改src/App.vue，引入Demo24.vue并进行渲染：

<script setup>
import Demo from "./components/Demo25.vue"
</script>
<template><h1>欢迎跟着Python私教一起学习Vue3入门课程</h1><hr><Demo/>
</template>

然后，我们浏览器访问：http://localhost:5173/

在这里插入图片描述

完整代码

package.json

{"name": "hello","private": true,"version": "0.1.0","type": "module","scripts": {"dev": "vite","build": "vite build"},"dependencies": {"vue": "^3.3.8"},"devDependencies": {"@vitejs/plugin-vue": "^4.5.0","vite": "^5.0.0"}
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],
})

index.html

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

src/main.js

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

src/App.vue

<script setup>
import Demo from "./components/Demo25.vue"
</script>
<template><h1>欢迎跟着Python私教一起学习Vue3入门课程</h1><hr><Demo/>
</template>

src/components/Demo25.vue

<script setup>
import {onBeforeMount, onMounted} from "vue";onMounted(() => {alert("实现mounted生命周期方法")
})
onBeforeMount(() => {alert("实现beforeMount方法")
})
</script>
<template><div><h3>演示生命周期方法</h3></div>
</template>