Vue3基础——生命周期

Vue2生命周期

Vue2组件的生命周期有4个，每个周期对应两个生命周期回调

• 创建：beforeCreate、created，只调用一次
• 挂载：beforeMount、mounted，只调用一次
• 更新：beforeUpdate、updated，每次修改数据都会调用
• 销毁：beforeDestroy、destroyed，只调用一次

Vue3生命周期

• 创建：使用setup替代了beforeCreated和created，setup函数的执行在beforeCreated函数之前
• 挂载：onBeforeMount、onMounted
• 更新：onBeforeUpdate、onUpdated
• 销毁：onBeforeUnmount、onUnmounted

父组件与子组件的生命周期顺序

1. 父组件创建
2. 父组件挂载前
3. 子组件创建
4. 子组件挂载
5. 父组件挂载

自定义Hooks

将一些可复用的代码封装成一个函数（hook函数），作为模块使用，hook文件用useXXX.ts命名，存放在hooks目录

import { ref } from 'vue'
export default function () {
    let sum = ref(0)
    
    function add(value: number) {
        sum.value += value
    }
    
    return {
        sum,
        add
    }
}

在其他模块导入使用

import useSum from '@/hooks/useSum'
const {sum, add} = useSum()