Vue生命周期

1.生命周期简介

  • beforecreate：实例初始化之后，数据观测和实践配置之前调用
  • create：实例创建完成后立即调用， 此时实例已经完成数据观测、属性和方法的运算、watch/event事件回调
  • beforeMount：在挂载开始之前被调用，相关render函数被首次调用
  • mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子
  • beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前
  • update：由于数据更改导致的虚拟DOM重新渲染和打印补丁之后调用
  • beforeUnmount：实例卸载之前调用
  • unmounted：实例被卸载之后调用
  • onActivated：被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行
  • onDeactivated： 比如从 A 组件，切换到 B 组件，A 组件消失时执行
  • onErrorCaptured： 当捕获一个来自子孙组件的异常时激活钩子函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="https://unpkg.com/element-plus@2.9.6/dist/index.css" />
		<script src="https://unpkg.com/vue@3.5.13/dist/vue.global.js"></script>
		<script src="https://unpkg.com/element-plus@2.9.6/dist/index.full.js"></script>
		<title>Vue生命周期</title>
		<style>

		</style>
	</head>
	<body>
		<div id="app">
			<lifecycle-demo />
		</div>
	</body>
	<script setup>
		const LifecycleDemo = {
			template: `<div>{{ message }}</div>`,
			data() {
				return {
					message: 'Hello, Vue!'
				};
			},
			onMounted() {
				console.log("11111");
			},
			beforeCreate() {
				console.log('beforeCreate: 实例刚刚被创建');
			},
			created() {
				console.log('created: 实例创建完成');
			},
			beforeMount() {
				console.log('beforeMount: 挂载开始之前');
			},
			mounted() {
				console.log('mounted: 实例已挂载');
			},
			beforeUpdate() {
				console.log('beforeUpdate: 数据更新之前');
			},
			updated() {
				console.log('updated: 数据更新完成');
			},
			beforeUnmount() {
				console.log('beforeUnmount: 实例卸载之前');
			},
			unmounted() {
				console.log('unmounted: 实例已卸载');
			}
		};

		const app = Vue.createApp({
			components: {
				LifecycleDemo
			}
		});

		app.mount('#app');
	</script>
</html>

在组合式API中：

  • onMounted：等同于 mounted。
  • onBeforeUnmount：等同于 beforeUnmount。
  • onUnmounted：等同于 unmounted。
  • onBeforeMount：等同于 beforeMount。
  • onBeforeUpdate：等同于 beforeUpdate。
  • onUpdated：等同于 updated。
  • onCreated和 onBeforeCreate在组合式 API 中通常不常用，因为 setup 中的代码会在创建阶段运行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载！');
      // 在此处进行初始化操作
    });

    onBeforeUnmount(() => {
      console.log('组件即将卸载！');
      // 在此处进行清理操作
    });
  }
};

2.Vue2和Vue3生命周期对比

1
2
3
4
5
6
7
8
9
10
11
12
Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

3.Vue生命周期总览图

lifecycle

4.表格展示

钩子名称 触发时机
beforeCreate 实例初始化之后，数据观测和事件配置之前调用。
created 实例创建完成后立即调用，此时实例已经完成数据观测、属性和方法的运算、watch/event 事件回调。
beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。
beforeUnmount 实例卸载之前调用。
unmounted 实例被卸载之后调用。

5.Vue的SPA风格展示生命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<template>
  <div id="app">
    <p id="box">{{msg}}</p>
    <button @click="change">更新</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hello'
    }
  },
  methods: {
    change () {
      this.msg = 'hello world'
    }
  },
  beforeCreate () {
    console.log('---------------->beforeCreate')
    console.log(this.msg, document.getElementById('box'))
  },
  created () {
    console.log('---------------->created')
    console.log(this.msg, document.getElementById('box'))
  },
  beforeMount () {
    console.log('---------------->beforeMount')
    console.log(this.msg, document.getElementById('box'))
  },
  mounted () {
    console.log('---------------->mounted')
    console.log(this.msg, document.getElementById('box'))
  },
  beforeUpdate () {
    console.log('---------------->beforeUpdate')
    console.log(this.$el.innerHTML)
    console.log(this.msg, document.getElementById('box'))
  },
  updated () {
    console.log('---------------->updated')
    console.log(this.$el.innerHTML)
    console.log(this.msg, document.getElementById('box'))
  }
}
</script>

参考文献

Vue.js 菜鸟教程 清和时光 前端Ckk