深圳市建设集团百度百科优化
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>
执行结果：
