Vue3 组件生命周期详解

万物皆有生命周期。人的生命周期,分别有婴儿期,成熟期、晚年期,在不同的生命时期里所做的工作是不一样的,组件也有生命周期,如下:

<script>
  import {
    createComponent,
    onMounted,
    onUpdated,
    onUnmounted
  } from '@vue/composition-api' //导入相应的生命周期函数
  export default createComponent({
    setup() {
      onMounted(() => {
        console.log('mounted!')
      })
      onUpdated(() => {
        console.log('updated!')
      })
      onUnmounted(() => {
        console.log('unmounted!')
      })
    }
  })
</script>

下面是 2.x Options 和 Composition API 的生命周期对照表:

教程来源于Github,感谢SJanJan大佬的无私奉献,致敬!

技术教程推荐

AI技术内参 -〔洪亮劼〕

Netty源码剖析与实战 -〔傅健〕

爱上跑步 -〔钱亮〕

如何落地业务建模 -〔徐昊〕

大数据经典论文解读 -〔徐文浩〕

玩转Vue 3全家桶 -〔大圣〕

计算机基础实战课 -〔彭东〕

结构执行力 -〔李忠秋〕

AI大模型系统实战 -〔Tyler〕