Vue学习计划-Vue3--核心语法（五）生命周期、自定义Hook

1. 生命周期

• 概念： Vue组件实例在创建时要经历一些列的初始化步骤，在此过程中vue会在合适的时机，调用特定函数，从而让开发中有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子
• 规律：

生命周期整体分为四个阶段：分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后

• Vue2的生命周期

创建阶段：beforeCreate、created

挂载阶段：beforeMount、mounted

更新阶段： beforeUpdate、updated

销毁阶段：beforeDestroy、destroyed

• Vue3的生命周期

创建阶段：setup

挂载阶段：onBeforeMount、onMounted

更新阶段：onBeforeUpdate、onUpdated

卸载阶段：onBeforeUnmount、onMounted

• 常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

• 示例代码

2. 自定义Hook

• 什么是hook? ------------本质是一个函数，把setup函数中使用的Composition API进行了封装，类似与Vue2中的mixin
• 自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂
• hooks文件夹中，每一个功能的hook文件期望是usexxx命名的
• hook的出现诠释了composition API 的终极意义
• 示例代码

  1. useSum.ts中内容如下：

     import { ref, computed, onMounted } from 'vue'

     export default function() {
     let sum = ref(0)

     let bigSum = computed(()=> {
     return sum.value * 10
     })

     onMounted(()=> {
     changeSum()
     })

     function changeSum(){
     sum.value += 1
     }

     return {sum, bigSum, changeSum}
     }

  2. useDog.ts中内容如下：

     import { reactive, onMounted } from 'vue'
     import axios from 'axios'

     export default function(){
     let dogList = reactive([])

     async function getDog(){
     try{
     let {data} = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
     dogList.push(data.message)
     } catch(error){
     alert(error)
     }
     }
     onMounted(() => {
     getDog()
     })

     return {dogList, getDog}
     }

  3. 组件中具体使用：