在前几篇内容中不断讲到关于 Vue2 转 Vue3 ，讲这个 Vue3 是通过函数调用的方式，重要的也就是这个 Composition API (复合的API接口) ，在前面的几篇内容就讲到 Composition API 中的几个函数方法，如 ref ，reactive ，toRefs ；那么本篇来讲这个生命周期，这里同样附上之前的Vue2 中生命周期的篇目 ：第三十四篇 生命周期 - 易理解 ，Vue2 中的生命周期同样在 Vue3 兼容的，但在这个 Composition API 中，同样的这个 this 怎么去使用，即使可以拿到这个实例，但会发现这样显然会比较混乱，写法四不像，所以这里使用这个函数式的写法就需要用它对应的生命周期来写，下面来看一下这张表格：

        下面来使用一下 Composition API 的生命周期使用，不再像之前使用的一样生命周期在同一级别上，也就是说不能定义在外边，这样就相当于定义了一个函数会被自动触发，所以只能是主动的来去调用它来使用，画个图理解一下：

<!-- Vue2 生命周期 -->
<script>
export default {
    created(){},
    mounted(){}
}
</script>

         下面来测试使用一下：

<script>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated } from 'vue'
export default {
  setup () {
    // 注册回调
    onBeforeMount(() => {
      console.log('onBeforeMount')
    })
    onMounted(() => {
      console.log('onMounted')
    })
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('onUnmounted')
    })
  }
}
</script>

        这里没有进行数据的更新所以不会触发onBeforeUpdate后续的这些生命周期函数，那么下面来通过一个按钮进行一个数据状态的更新，从而去触发这个生命周期函数：

<!-- App.vue -->
<template>
    <div>
        <!-- state更新 -->
        <p>{{ myName }}</p>
        <button @click="handleChange">更新</button>
    </div>
</template>
<script>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, reactive, toRefs } from 'vue'
export default {
  setup () {
    // 注册回调
    onBeforeMount(() => {
      console.log('onBeforeMount')
    })
    onMounted(() => {
      console.log('onMounted')
    })
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('onUnmounted')
    })

    const state = reactive({
      myName: 'lhxz'
    })
    const handleChange = () => {
      state.myName = 'SYAN'
    }
    return {
      ...toRefs(state),
      handleChange
    }
  }
}
</script>

数据请求

        在之前使用 Vue2 的生命周期做一些数据请求工作，会在 created 或者 mounted 生命周期，那么下面使用刚刚讲到 Vue3 的生命周期做数据请求；

        那么在此就不在使用封装数据请求，使用 axios ；关于 axios 的使用也不再过多的讲解，这里提供相关的篇目链接： 第二十篇 axios使用 ，同时还需要进行解决跨域请求，同样这些内容在先前都已经讲过处理的方式也不再赘述： xxxxxxxxxxxxxxxx

<script>
// https://m.maizuo.com
// X-Client-Info: {"a":"3000","ch":"1002","v":"5.2.1","e":"16753207015161962279272449"}
// X-Host: mall.film-ticket.film.list
import axios from 'axios'
import { onMounted } from 'vue'
export default {
  setup () {
    onMounted(() => {
      axios({
        url: 'https://m.maizuo.com/gateway?cityId=440300&pageNum=1&pageSize=10&type=1&k=7778789',
        method: 'GET',
        headers: {
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16753207015161962279272449"}',
          'X-Host': 'mall.film-ticket.film.list'
        }
      })
        .then(res => {
          console.log(res)
        })
    })
  }
}
</script>

        那么本篇的生命周期就先讲到这里，关于生命周期的其他内容需要注意或者其他重点会在后续的内容上进行补充，感谢大家的支持！！！