生命周期钩子函数
Vue3：https://cn.vuejs.org/api/composition-api-lifecycle.html
Vue2：https://v2.cn.vuejs.org/v2/api/#选项-生命周期钩子
| Vue2（选项式） | Vue3（选项式） | Vue3（组合式Api） |
|---|---|---|
| beforeCreate() | beforeCreate() | |
| created() | created() | |
| setup() | ||
| beforeMount() | beforeMount() | onBeforeMount() |
| mounted() | mounted() | onMounted() |
| beforeUpdate() | beforeUpdate() | onBeforeUpdate() |
| updated() | updated() | onUpdated() |
| beforeDestory() | onBeforeUnmount() | |
| destoryed() | onUnmounted() | |
| activated | activated | onActivated() |
| deactivated | deactivated | onDeactivated() |
总结：
- 之前在vue2中在created和beforeCreate写的初始化代码，现在写到setup中。
- vue3的组合式api和选项式对比，名字上只是多了个On。
- Vue3组合式api的钩子函数可以使用多次。详见下面的例子：
<script setup>
// 功能A.....
import {onMounted} from "vue";
onMounted(() => {
console.log('功能A，onMounted')
})
// 功能B
onMounted(() => {
console.log('功能B，onMounted')
})
</script>
<style lang="less" scoped>
</style>
Vue2和Vue3生命周期对比图：
