Vue3.0生命周期钩子(包含:Vue 2.0 和 Vue 3.0)
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>
执行结果: