Vue3 中生命周期的使用

最新推荐文章于 2024-10-02 23:10:36 发布
最新推荐文章于 2024-10-02 23:10:36 发布
阅读量7k 收藏 66
点赞数 30
分类专栏： vue3 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62897746/article/details/129148532
版权

目录

前言：

Vue2 和 Vue3 中的生命周期钩子的工作方式非常相似，我们仍然可以访问相同的钩子，也希望将它们能用于相同的场景。

如果项目使用 选项 API，就不必更改任何代码了，因为 Vue3 兼容以前的版本。
当然，我们用 Vue3 就是要用它的 组合 API，组合 API 中访问这些钩子的方式略有不同，组合API 在较大的Vue项目中特别有用。

一、什么是生命周期函数

组件从创建到销毁的整个过程，不同阶段执行不同的函数

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

选项式API下的生命周期函数使用组合式API下的生命周期函数使用
beforeCreate不需要（直接写到setup函数中）
created不需要（直接写到setup函数中）
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeDestroyedonBeforeUnmount
destroyedonUnmounted

在这里插入图片描述

在这里插入图片描述

主要 Vue 生命周期事件被分为两个钩子，分别在事件之前和之后调用，vue 应用程序中有4个主要事件(8个钩子)：

  • 创建 ---- 在组建创建时执行
  • 挂载 ---- DOM 被挂载时执行
  • 更新 ---- 当响应数据被修改时执行
  • 销毁 ---- 在元素被销毁之前立即执行

在【options API】中，生命周期钩子是被暴露在 vue 实例上的选项，我们只需要调用使用即可。

在【composition API】中，我们需要将生命周期钩子导入项目，然后才能使用。

import {onMounted} from 'vue'

在这里，beforecreate 和 created 被 setup 方法本身所替代。

二、什么是 Keep-Alive 组件

keepalive是 Vue 的内置组件，作用是将组件缓存在内存当中，防止重复渲染 DOM，属于消耗内存获取速度。常用的用法是将组件或者路由缓存，现有的用法 vue2.x 与 vue3.x有部分差别。以下主要将 keepaliev 在 vue3.0 中的用法。

点击跳转至官方网站查看 Keep-Alive 组件详情

三、生命周期函数分为几种，分别有什么用？

1. beforeCreate

  1. beforeCreate 选项式声明周期函数
  2. 在组件实例初始化之前调用（props 解析已解析、data 和 computed 等选项还未处理）
  3. 不能访问组件的实例 this 及其组件中的数据源和函数等
  4. 不能访问组件中的视图 DOM 元素
  5. 组合式 API 中的 setup() 钩子会在所有选项式 API 钩子之前调用

2. created

  1. created 选项式生命周期函数
  2. 在组件实例化成功后调用
  3. 可访问组件的实例 this 及其组件中的数据源和函数等
  4. 不能访问组件中的视图 DOM 元素

3. beforeMount/onBeforeMount

  1. beforeMount：选项式生命周期函数、onBeforeMount：组合式生命周期钩子
  2. 组件视图在浏览器渲染之前调用
  3. 可访问组件实例东西（数据源、函数、计算属性等）
  4. 不能访问组件视图中的 DOM 元素

4. mounted/onMounted

  1. mounted：选项式生命周期函数、onMounted：组合式生命周期钩子
  2. 组件视图在浏览器渲染之后调用
  3. 可访问组件实例东西（数据源、函数、计算属性等）
  4. 可以访问组件视图中的 DOM 元素

5. beforeUpdate/onBeforeUpdate

  1. beforeUpdate：选项式生命周期函数、onBeforeUpdate：组合式生命周期钩子
  2. 数据源发生变化时，组件视图重新渲染之前调用
  3. 可访问组件实例东西（数据源、函数、计算属性等）
  4. 可以访问该组件中在更新之前的 DOM 元素，但是不能访问该组件中在更新之后的 DOM 元素

6. updated/onUpdated

  1. updated：选项式生命周期函数、onUpdated：组合式生命周期钩子
  2. 数据源发生变化时，组件视图重新渲染之后调用
  3. 可访问组件实例东西（数据源、函数、计算属性等）
  4. 不可以访问该组件中在更新之前的 DOM 元素，但是可以访问该组件中在更新之后的 DOM 元素

7. beforeUnmount/onBeforeUnmount

  1. beforeUnmount：选项式生命周期函数、onBeforeUnmount：组合式生命周期钩子
  2. 组件实例被卸载之前调用
  3. 可访问组件实例东西（数据源、函数、计算属性等）
  4. 可以访问组件视图中的 DOM 元素

8. unmounted/onUnmounted

  1. unmounted：选项式生命周期函数、onUnmounted：组合式生命周期钩子
  2. 组件实例被卸载之后调用
  3. 可访问组件实例东西（数据源、函数、计算属性等）
  4. 不可以访问组件视图中的 DOM 元素
  5. 一般在这个生命周期函数里，我们可以手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。

四、在代码中如何使用生命周期函数？

1. 选项式

<script>
export default{
    props: ['subtitle'],
    data: () => ({
        age: 30
    }),
    methods: {
        showMessage() {
            console.log('函数 HELLO');  
        }
    },
    // 组件实例话之前
    // 可以访问 props 的数据的
    // 不能访问组件的实例 this 中的数据源和函数等
    // 不能访问组件中的视图DOM元素
    beforeCreate() {
        console.log('----------------------------')
        console.log('beforeCreate 组件实例话之前')
        console.log(this.$props.subtitle)
        console.log('不能访问组件的实例 this 中的数据源和函数等');
        console.log('不能访问组件中的视图DOM元素');
        // console.log(this.age)
        // this.showMessage()
        // console.log(document.getElementById('title').innerHTML)
    },
    // 组件实例话之后
    // 可以访问组件中的数据，函数，自定义的属性等
    // 不能访问组件中的视图DOM元素
    created() {
        console.log('----------------------------')
        console.log('created 组件实例话之后')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    },
    // 组件视图渲染之前
    // 可以访问组件中的数据，函数，自定义的属性等
    // 不能访问组件中的视图DOM元素
    beforeMount() {
        console.log('----------------------------')
        console.log('beforeMount 组件视图渲染之前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    },
    // 组件视图渲染之后
    // 可以访问组件中的数据，函数，自定义的属性等
    // 不能访问组件中的视图DOM元素
    mounted() {
        console.log('----------------------------')
        console.log('mounted 组件视图渲染之后')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },
    // 数据源发生改变，视图重新渲染前
    // 可以访问组件中的数据，函数，自定义的属性等
    // 可访问重新渲染的 DOM 元素之前的状态
    beforeUpdate() {
        console.log('----------------------------')
        console.log('beforeUpdate 数据源发生改变，视图重新渲染前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },
    // 数据源发生改变，视图重新渲染后
    // 可以访问组件中的数据，函数，自定义的属性等
    // 可访问重新渲染的 DOM 元素之后的状态
    updated() {
        console.log('----------------------------')
        console.log('updated 数据源发生改变，视图重新渲染后')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },
    // 组件在卸载之前
    // 可以访问组件中的数据，函数，自定义的属性等
    // 可访组件视图的 DOM 元素
    beforeUnmount() {
        console.log('----------------------------')
        console.log('beforeUnmount 组件在卸载之前')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log(document.getElementById('title').innerHTML)
    },
    // 组件已卸载
    // 可以访问组件中的数据，函数，自定义的属性等
    // 不可访组件视图的 DOM 元素
    unmounted(){
        console.log('----------------------------')
        console.log('unmounted 组件已卸载')
        console.log(this.$props.subtitle)
        console.log(this.age)
        this.showMessage()
        console.log('不能访问组件中的视图DOM元素');
        // console.log(document.getElementById('title').innerHTML)
    }
}
</script>

<template>
    <h3 id="title">
        <i>年龄：{{ age }}</i>
    </h3>

    <button @click="(age = 70)">年龄改成 70</button>
    <button @click="(age = 30)">年龄改成 30</button>
</template>

2. 组合式

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

let age = ref(30)

function showMessage() {
    console.log('HELLO')
}

// 组件视图渲染之前
// 能访问组件实例的东西（数据源、函数等）
// 但是不能访问组件视图中的 DOM 元素
onBeforeMount(() => {
    console.log('------------------------')
    console.log('onBeforeMount 组件视图渲染之前（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log('不能访问组件视图中的 DOM 元素');
    // console.log(document.getElementById('title').innerHTML)
})

// 组件视图渲染之后
// 能访问组件实例的东西（数据源、函数等）
// 可以访问组件视图中的 DOM 元素
onMounted(() => {
    console.log('------------------------')
    console.log('onMounted 组件视图渲染之后（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

// 数据源发生变化，组件视图重新渲染之前
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图渲染之前的 DOM 元素
onBeforeUpdate(() => {
    console.log('------------------------')
    console.log('onBeforeUpdate 数据源发生变化，组件视图重新渲染之前（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

// 数据源发生变化，组件视图重新渲染之后
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图渲染之后的 DOM 元素
onUpdated(() => {
    console.log('------------------------')
    console.log('onUpdated 数据源发生变化，组件视图重新渲染之后（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

// 组件卸载之前
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图 DOM 元素
onBeforeUnmount(() => {
    console.log('------------------------')
    console.log('onBeforeUnmount 组件卸载之前（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
}) 

// 组件卸载之后
// 能访问组件实例的东西（数据源、函数等）
// 不能访问组件视图 DOM 元素
onUnmounted(() => {
    console.log('------------------------')
    console.log('onUnmounted 组件卸载之后（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log('不能访问组件视图中的 DOM 元素');
    // console.log(document.getElementById('title').innerHTML)
}) 

</script>

<template>
    <h3 id="title">
        <i>年龄：{{ age }}</i>
    </h3>
    <button @click="(age = 70)">年龄改成 70</button>
    <button @click="(age = 30)">年龄改成 30</button>
</template>

总结：

欢迎大家加入我的社区，在社区中会不定时发布一些精选内容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003

以上就是 Vue3 中生命周期的使用，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog

清风 与我
关注
专栏目录
vue3【生命周期讲解-详】
蜗牛~~
11-16 1983
vue3【生命周期讲解-详】
vue3 第三幕之【生命周期函数】(挂载篇+更新篇+卸载篇)
XSL_HR的博客
09-22 5308
关于vue3生命周期挂载 更新 卸载过程的详细分析总结
vue3.0 生命周期简介
weixin_44019816的博客
10-29 2857
setup() 替代 beforecreate -> use setup() created -> use setup() 前面加on beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onbeforeUpdate updated -> onUpdated activated -> onActivated deactivated -> onDeactivated e...
Vue3 中关于 keep-alive 的探索
最新发布
m0_57836225的博客
10-02 677
在 Vue3 中，系统自带了多个生命周期钩子，这些钩子在组件的不同阶段被触发，帮助我们更好地管理组件的状态和行为。在 Vue3 中，keep-alive组件是一个非常有用的工具，它可以帮助我们缓存组件，提高应用的性能。通过了解使用keep-alive组件后的生命周期变化，我们可以更好地管理组件的状态和行为，为用户提供更加流畅的体验。
vue3怎么使用生命周期
qq_41504401的博客
09-01 648
在Vue实例创建后立即调用，在此阶段，已经完成了数据的观测，可以使用已经设置的数据，也可以进行操作，但此时还没有挂载到DOM中。需要注意的是，Vue3中的生命周期函数使用的是函数式API，而不是对象式API。：在Vue实例挂载到DOM后被调用，此时数据已经更新渲染到DOM中，可以进行DOM操作。：在Vue实例销毁之后被调用，此时DOM已经卸载完成，此时进行的操作为清理工作。：在Vue实例创建之前被调用，此时还没有初始化实例中的数据和事件。：在数据更新之后被调用，此时DOM已经重新渲染。
Vue 3 生命周期完整指南
2301_79099606的博客
05-14 893
使用 选项API，生命周期钩子是被暴露 Vue实例上的选项。我们不需要导入任何东西，只需要调用这个方法并为这个生命周期钩子编写代码。例如，假设我们想访问mounted()和updated()生命周期钩子，可以这么写：// 选项 API。
Vue3 使用 生命周期函数
Bi-Hu的博客
10-07 232
<script> //引入生命周期函数 onMounted import {onMounted} from "vue"; import axios from "axios"; export default { name: "Content", setup() { console.log("setup"); //生命周期函数一定要在 setup中执行...
Vue3的生命周期的使用
m0_56219678的博客
02-11 1万+
Vue3生命周期与vue2生命周期的区别，以及vue3生命周期组合式API的写法
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
vue3+ts (源码+笔记+生命周期截图)
02-14
7. ** 生命周期钩子的改变**：Vue3 中生命周期钩子发生了变化，如 `beforeCreate` 和 `created` 合并为 `onBeforeMount`，`beforeDestroy` 和 `destroyed` 合并为 `onBeforeUnmount` 等。此外，还新增了一些生命周期...
解决Vue中的生命周期beforeDestory不触发的问题
10-15
这可以通过实例化一个Vue实例，并在Vue-resource的actions中使用实例化后的Http对象来调用$http方法。 在使用Vuex时，需要注意正确地提交mutation和执行action。在action中，不应直接更改状态，而是应该通过...
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
在父子组件的生命周期中，Vue遵循特定的规则来执行这些钩子函数。一般规则如下： - 父组件的`beforeCreate`和`created`钩子在任何子组件被创建之前执行。 - 当父组件挂载时，它的`beforeMount`钩子会执行。 - 父...
学习vue3系列生命周期
热门推荐
前端精髓
08-08 3万+
之前已经介绍了 vue3 的相关知识点：ref，reactive，computed，watch，watchEffect，toRef，toRefs 这些响应式的API，相信大家对 vue3 已经有一定的理解了。 生命周期 除了这些函数 vue3 还增加了些生命周期，可以直接导入 onXXX 一族的函数来注册生命周期钩子：与 2.x 版本生命周期相对应的组合式 API。 1、beforeCreate -> 使用 setup() 2、created -> 使用 setup() 3、beforeMou.
Vue 3 中的常用生命周期函数使用场景详解
aike13ky的博客
05-05 3279
Vue 3 的生命周期钩子为开发者提供了在组件生命周期的不同阶段执行特定逻辑的能力。通过合理使用这些钩子，我们可以更好地管理组件的状态、DOM 操作和副作用，从而创建出更高效、更健壮的 Vue 应用程序。每个钩子都有其特定的使用场景，了解并正确使用它们可以大大提高我们的开发效率。
vue3里面生命周期的使用
qq_44552416的博客
12-05 1514
vue2里面的生命周期和vue3生命周期是非常的相似的，我们通过访问生命周期钩子来处理不同场景之间的应用。生命周期钩子的函数定义：每一个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中的阶段我们称为是生命周期钩子函数。这里我们使用的vue3生命周期函数为组合式API下的生命周期函数的。【组合式写法没有 beforeCreate / created 生命周期，并且组合式写生命周期用哪个先引哪个。
【Vue3】生命周期函数
qq_39921135的博客
06-14 390
Vue3中写选项式的写法也是可以的，但既然都到Vue3来了，选项式直接不用了，直接写组合式了，组合式带来的好处就是：逻辑更方便复用，更好维护。Vue2中的beforeDestroy变成了beforeUnmount，destroyed变成了unmounted。组合式API中没有onCreated这个钩子函数，而是直接写到setup中。左边都是一个个配置项，右边都是一个个函数，相当于配了一个小的生命周期逻辑。组合式API中生命周期函数的格式：on + 生命周期名字。
Vue3——生命周期
mantou_riji的博客
07-25 3457
组合式api编写方法比配置项编写方法的优先级高一些，但是一般只写一种即可。//通过配置项的形式使用生命周期钩子。Vue3.0也提供了。
vue3的生命周期函数
z17864151193的博客
04-03 1万+
Vue2和Vue3中的生命周期钩子函数非常相似——我们仍然可以访问相同的钩子函数，并且我们仍然希望将它们用于相同的用例。 但是，随着CompositionAPI的引入，我们访问这些钩子函数的方式已经改变。 到本文结束时，你将了解在Vue3中使用生命周期钩子函数的新方法，并开始编写更好的代码。 什么是Composition API 如果你还不知道，Vue3 Composition API 附带了一个setup()方法。此方法封装了我们的大多数组件代码，并处理了响应式，生命周期钩子函数等。 ...
vue3之生命周期
小李在努力学习
03-24 4681
生命周期
vue3中生命周期使用方式
11-14
在Vue 3中，生命周期的使用方式有两种： 第一种方式是通过配置使用生命周期钩子函数，在`setup()`外面配置。具体的生命周期函数包括： - `beforeCreate` - `created` - `beforeMount` - `mounted` - `beforeUpdate` - `updated` `beforeUnmount` - `unmounted` 例如，在组件中使用`beforeMount`和`mounted`生命周期函数： ```vue <template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello, Vue 3!' } }, beforeMount() { console.log('beforeMount') }, mounted() { console.log('mounted') } } </script> ``` 第二种方式是在组合式API中使用生命周期钩子函数。在组合式API中，`beforeCreate`和`created`相当于`setup()`，执行的时机高于配置项。具体的生命周期函数包括： - `onBeforeMount` - `onMounted` - `onBeforeUpdate` - `onUpdated` - `onBeforeUnmount` - `onUnmounted` 例如，在组合式API中使用`onBeforeMount`和`onMounted`生命周期函数： ```vue <template> <div>{{ message }}</div> </template> <script> import { onBeforeMount, onMounted } from 'vue' export default { setup() { const message = 'Hello, Vue 3!' onBeforeMount(() => { console.log('beforeMount') }) onMounted(() => { console.log('mounted') }) return { message } } } </script> ```
评论 34
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清风 与我

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值