Vue3.0生命周期钩子（包含：Vue 2.0 和 Vue 3.0）

news2024/11/18 15:23:47

1、Vue 2.0 生命周期钩子

每个应用程序实例在创建时都有一系列的初始化步骤。例如，创建数据绑定、编译模板、将实例挂载到 DOM 并在数据变化时触发 DOM 更新、销毁实例等。在这个过程中会运行一些叫做生命周期钩子的函数，通过这些钩子函数可以定义业务逻辑。应用程序实例中几个主要的生命周期钩子函数的说明如下：

钩子函数	说明
beforeCreate()	在实例初始化之后且数据观测和事件/监听器配置之前调用。
created()	在实例创建之后进行调用，此时尚未开始 DOM 编译。在需要初始化处理一些数据时会比较有用。
beforeMount()	在挂载开始之前进行调用，此时 DOM 还无法操作。
mounted()	在 DOM 文档渲染完毕之后进行调用。相当于 JavaScript 中的 windos.onload() 方法。
beforeUpdate()	在数据更新时进行调用，适合在更新之前访问现在的 DOM，如手动移除已添加的事件监听器。
updated()	在数据更新导致的虚拟 DOM 被重新渲染时进行调用。
beforeDestroy()	在销毁实例之前进行调用，此时实例仍然有效。此时可以解绑一些使用 addEventListener 监听的事件等。
destroyed()	在实例被销毁之后进行调用。

【实例】使用生命周期钩子，了解 Vue.js 内部的运行机制。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue生命周期钩子</title>
</head>

<body>
    <div id="app">
        <p>{{text}}</p>
    </div>
</body>

<!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script>

<script type="text/javascript">
    //创建应用程序实例
    const vueApp = Vue.createApp({
        //返回数据对象
        data() {
            return {
                text: "千里之行，始于足下"
            }
        },
        //生命周期钩子
        beforeCreate: function () {
            console.log("beforCreate");
        },
        created: function () {
            console.log("created");
        },
        beforeMount: function () {
            console.log("beforeMount");
        },
        mounted: function () {
            console.log("mounted");
        },
        beforeUpdate: function () {
            console.log("beforeUpdate");
        },
        updated: function () {
            console.log("updated");
        }
        //转载应用程序实例的根组件
    }).mount("#app");

    //使用定时器函数，2秒后修改内容
    setTimeout(function () {
        console.log("修改数据内容：")
        vueApp.text = "水不在深，有龙则灵";
    }, 2000);
</script>

</html>

执行结果：

当2秒后调用 setTimeout() 方法，修改 text 的内容，触发 beforeUpdate() 和 updated() 钩子函数。

2、Vue 3.0 生命周期钩子

Vue3.0 是兼容 Vue2.x 版本的也就是说我们再日常工作中可以在 Vue3 中使用 Vue2.x 的相关语法。

Vue 3.0 带来了许多新特性和改进，其中包括更强大的组合 API。与基于选项的 API 相比，组合 API 中的生命周期钩子函数也发生了变化，将选项中的生命周期钩子函数改成了 onXxx() 函数的形式。

需要注意：

1、beforeCreate() 和 created() 两个钩子函数已被删除了，取而代之的是 setup() 函数。

2、组合 API 中的生命周期钩子函数都是在 setup() 函数内部通过引入相应的函数来使用的。

Vue 3.0 中新增的钩子函数主要包括：

组合 API 钩子函数	说明
setup()	setup() 函数是一个新的组件选项，它是组件内部使用组合 API 的入口。 setup() 函数在组件实例创建之前、初始化 Prop 之后调用。 setup() 函数可以返回一个对象或函数，对象的属性会合并到组件模板渲染的上下文中。
onBeforeMount()	组件挂载到节点上之前执行的函数。
onMounted()	组件挂载完成后执行的函数。
onBeforeUpdate()	组件更新之前执行的函数。
onUpdated()	组件更新完成之后执行的函数。
onBeforeUnmount()	组件卸载之前执行的函数
onUnmounted()	组件卸载完成后执行的函数。
onActivated()	被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行。
onDeactivated()	比如从 A 组件，切换到 B 组件，A 组件消失时执行。
onErrorCaptured()	当捕获一个来自子孙组件的异常时激活钩子函数。

Vue2.0 和 Vue3.0 生命周期钩子函数对比：

【实例】创建一个组件，实现一个计数器功能。

<template>
  <div>
    <h3>{{ blogInfo.name }}</h3>
    <h3>{{ blogInfo.url }}</h3>
    <p>计数结果：{{ count }}</p>
    <button @click="counter">计数器</button>
  </div>
</template>

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

export default {
  setup() {

    // 使用 ref 创建响应式的基本类型
    const count = ref(0);

    // 使用 reactive 创建响应式的复杂类型
    const blogInfo = reactive({
      name: '您好，欢迎访问 pan_junbiao的博客',
      url: 'https://blog.csdn.net/pan_junbiao'
    });

    // 挂载时的操作
    onMounted(() => {
      console.log('组件已挂载');
    });

    // 卸载时的操作
    onUnmounted(() => {
      console.log('组件已卸载');
    });

    // 增加计数的方法
    function counter() {
      count.value++;
    }

    // 返回需要在模板中使用的数据和方法
    return {
      blogInfo,
      count,
      counter
    };
  }
};
</script>

执行结果：