前言
Vue3的生命周期函数学习笔记
生命周期函数
| 生命周期函数 |
备注 |
onBeforeMount() |
挂载到虚拟DOM之前执行 |
onMount() |
挂载到虚拟DOM之后执行 |
onBeforeUpdate() |
虚拟DOM重新渲染之前执行 |
onUpdated() |
虚拟DOM重新渲染之后执行 |
onBeforeUnmount() |
组件卸载之前执行 |
onUnmounted() |
组件卸载之后执行 |
onActivated() |
组件被激活时执行 |
onDeactivated() |
组件被挂起时执行 |
OptionsAPI
1
2
3
4
5
6
7
| <script>
export default {
created: function () {
...
}
}
</script>
|
侦听
第一个参数：定义侦听的变量名
第二个参数：定义回调函数
第三个参数：定义其他配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script>
export default {
data: function () {
return {
key: "value"
}
},
created: function () {
this.$watch(
"key",
function (newValue, oldValue) {},
{ deep: true }
);
}
}
</script>
|
CompositionAPI
setup函数
1
2
3
4
5
6
7
8
9
10
11
| <script>
import { onMount } from "vue"
export default {
setup: function (attrs, slots, emit) {
onMount(function () {
...
});
}
}
</script>
|
setup语法糖
1
2
3
4
5
6
7
| <script setup>
import { onMount } from "vue"
onMount(function () {
...
});
</script>
|
完成