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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容