vue3生命周期解读

仅仅为了方便学习记录信息，未有其他用途。（采摘）

与 2.x 版本生命周期相对应的组合式 API

1. beforeCreate -> 使用 setup()
2. created -> 使用 setup()
3. beforeMount -> onBeforeMount
4. mounted -> onMounted
5. beforeUpdate -> onBeforeUpdate
6. updated -> onUpdated
7. beforeDestroy -> onBeforeUnmount
8. destroyed -> onUnmounted
9. errorCaptured -> onErrorCaptured

• 新增:调试钩子函数：
• onRenderTracked
• onRenderTriggered

export default {
  //v2
  beforeCreate () {
    console.log('beforeCreate()')
  },
  created () {
    console.log('created')
  },
  beforeMount () {
    console.log('beforeMount')
  },
  mounted () {
    console.log('mounted')
  },
  //v3
  setup() {
    onBeforeMount(() => {
      console.log('--onBeforeMount')
    })
    onMounted(() => {
      console.log('--onMounted')
    })
    onRenderTriggered(e) {
      debugger
    // 检查哪个依赖性导致组件重新渲染
  },
    return {}
  }
}

Composition API(手写)<===========================>配置vue.config