【Vue3】生命周期函数

一、选项式对比组合式

Vue3中写选项式的写法也是可以的，但既然都到Vue3来了，选项式直接不用了，直接写组合式了，组合式带来的好处就是：逻辑更方便复用，更好维护。

左边都是一个个配置项，右边都是一个个函数，相当于配了一个小的生命周期逻辑

组合式API中生命周期函数的格式：on + 生命周期名字。

组合式API中没有onCreated这个钩子函数，而是直接写到setup中

Vue2中的beforeDestroy变成了beforeUnmount，destroyed变成了unmounted

---

二、生命周期函数基本使用

1. 导入生命周期函数
2. 执行生命周期函数，传入回调

<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>