Vue3.0 - 03. 生命周期

Vue3.0 学习系列

生命周期

  1. vue3的生命周期改变了vue2中挂载流程的 beforeDestroy和destroyed 函数,改变为 beforeUnmount 和 unmounted.
  2. 在vue3中可以用配置项的形式编写生命周期函数,但也可以是用组合函数的形式在setup中编写生命周期函数。但是所有生命周期函数都需要改名
  3. 具体的变化如下
    beforeCreate ==> setup()
    created ==> setup()
    beforeMount ==> onBeforeMount
    mounted ==> onMounted
    beforeUpdate ==> onBeforeUpdate
    updated ==> onUpdated
    beforeUnmount ==> onBeforeUnmount
    unmounted ==> onUnmounted
  4. 基本流程与vue2一致没有改变,只是减去了对是否包含el配置项的检查
    生命周期
student.vue
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
64
65
66
67
68
69
70
71
72
73
74
75
76
<template>
<div>
<h2>Student组件</h2><br/>
<span>increment: {{sum}}</span><br/>
<button @click="btnIncrement">increment</button><br/>

<hr />
</div>
</template>

<script>
/**

*/
import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from 'vue';
export default {
name: 'Student',
//vue2配置项的形式编写生命周期函数
// beforeCreate() {
// console.log('---beforeCreate---');
// },
// created() {
// console.log('---beforeCreate---');
// },
// beforeMount() {
// console.log('---beforeMount---');
// },
// mounted() {
// console.log('---mounted---');
// },
// beforeUpdate() {
// console.log('---beforeUpdate---');
// },
// updated() {
// console.log('---updated---');
// },
// beforeUnmount() {
// console.log('---beforeUnmount---');
// },
// unmounted() {
// console.log('---unmounted---');
// },
setup(props, context) {
let sum = ref(0)
let btnIncrement = function () {
sum.value++;
}
//组合api形式编写生命周期函数
onBeforeMount(() => {
console.log('---onBeforeMount---');
})
onMounted(() => {
console.log('---onMounted---');
})
onBeforeUpdate(() => {
console.log('---onBeforeUpdate---');
})
onUpdated(() => {
console.log('---onUpdated---');
})
onBeforeUnmount(() => {
console.log('---onBeforeUnmount---');
})
onUnmounted(()=>{
console.log('---onUnmounted---');
})
return {
sum,btnIncrement
}
}

}
</script>

<style>
</style>
app.vue
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
<template>
<!--
生命周期:
1. vue3的生命周期改变了vue2中挂载流程的 beforeDestroy和destroyed 函数,改变为 beforeUnmount 和 unmounted.
2. 在vue3中可以用配置项的形式编写生命周期函数,但也可以是用组合函数的形式在setup中编写生命周期函数。但是所有生命周期函数都需要改名
3. 具体的变化如下
beforeCreate ==> setup()
created ==> setup()
beforeMount ==> onBeforeMount
mounted ==> onMounted
beforeUpdate ==> onBeforeUpdate
updated ==> onUpdated
beforeUnmount ==> onBeforeUnmount
unmounted ==> onUnmounted
4. 基本流程与vue2一致没有改变,只是减去了对是否包含el配置项的检查
-->
<div>
<h2>app组件</h2><br/>
<button @click="isShowStudent">显示、隐藏student组件</button>
<Student v-if="isShow"></Student>
</div>
</template>

<script>
import {ref} from 'vue';
import Student from './components/Student.vue';
export default {
name: 'App',
components: {
Student
},

setup(props, context) {
let isShow = ref(true)
let isShowStudent = function () {
isShow.value = !isShow.value
}
return {
isShow,isShowStudent,
}
}
}
</script>

<style>
</style>

Vue2.0 基础学习目录

Vue2.0进阶学习

完整代码可以在 GitHub