一、选项式对比组合式
Vue3中写选项式的写法也是可以的,但既然都到Vue3来了,选项式直接不用了,直接写组合式了,组合式带来的好处就是:逻辑更方便复用,更好维护。
左边都是一个个配置项,右边都是一个个函数,相当于配了一个小的生命周期逻辑
组合式API中生命周期函数的格式:on + 生命周期名字。
组合式API中没有onCreated这个钩子函数,而是直接写到setup中
Vue2中的beforeDestroy变成了beforeUnmount,destroyed变成了unmounted
二、生命周期函数基本使用
- 导入生命周期函数
- 执行生命周期函数,传入回调
<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{
// 自定义逻辑
})
</script>
三、执行多次
生命周期函数执行多次的时候,会按照顺序依次执行
<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{
// 自定义逻辑
})
onMounted(()=>{
// 自定义逻辑
})
</script>
代码示例
<script setup>
import { onMounted } from 'vue';
// beforeCreate 和 created 的相关代码
// 一律放在 setup 中执行
const getList = () => {
setTimeout(() => {
console.log('发送请求,获取数据')
}, 2000)
}
// 一进入页面的请求
getList()
// 如果有些代码需要在mounted生命周期中执行,created直接写在setup里即可,mounted需要写在onMounted函数里
onMounted(() => {
console.log('mounted生命周期函数 - 逻辑1')
})
// 写成函数的调用方式,可以调用多次,并不会冲突,而是按照顺序依次执行
onMounted(() => {
console.log('mounted生命周期函数 - 逻辑2')
})
</script>
<template>
<div></div>
</template>