生命周期函数

  • 创建
  • 挂载
  • 更新
  • 销毁

vue2:

  • 创建前：beforeCreate
  • 创建完成：created
  • 挂载前：beforeMounte
  • 挂载完成：mounted
  • 更新前：beforeUpdate
  • 更新完成：updated
  • 销毁前：beforeDestroy
  • 销毁完成：destroyed

vue3:

  • 创建阶段只有：setup()
import { ref,onBeforeMount,onMounted,
        onBeforeUpdate,onUpdated,
       onBeforeUnmount,onUnmounted,} from 'vue'
onBeforeMount(() => {
    console.log('onBeforeMount')
})
onMounted(() => {
    console.log('onMounted')
})
onBeforeUpdate(() => {
    console.log('onBeforeUpdate')
})
onUpdated(() => {
    console.log('onUpdated')
})
onBeforeUnmount(() => {
    console.log('onBeforeUnmount')
})
onUnmounted(() => {
    console.log('onUnmounted')
})

父子组件生命周期

子先挂载

子先销毁