美文网首页
vue3.0 生命周期钩子

vue3.0 生命周期钩子

作者: 清风昙 | 来源:发表于2022-03-11 22:35 被阅读0次

在组合API中,生命周期钩子通过调用onXxx()函数显示地进行注册,这些函数只能在setup()期间同步使用,因为依赖内部全局状态定位当前活动实例(即setup()正在被调用的组件实例)。在没有当前活动实例的情况下调用它们将导致错误。组件实例上下文也是在生命周期钩子的同步执行期间设置的,因此在生命周期钩子内同步创建的监听器和计算属性也会在组件卸载时被自动删除。
vue2.x生命周期钩子函数和组合API之间的对应关系:
beforeCreate和created没有对应的onXxx()函数,取而代之使用setup()函数
beforeMount对应onBeforeMount
mounted对应onMounted
beforeUpdate对应onBeforeUpdate
updated对应onUpdated
beforeUnmount对应onBeforeUnmount
unmounted对应onUnmounted
activated对应onActivated
deactivated对应onDeactivated
errorCaptured对应onErrorCaptured
renderTracked对应onRenderTracked
renderTriggered对应onRenderTriggered
由以上可以看出,组合API中对应的生命周期钩子函数名字就是生命周期选项的名字首字母大写并添加前缀on
在单文件组件中使用组合API中注册生命周期钩子的例子:

import {onMounted, onUpdated} from 'vue'
const comp = {
  setup() {
    onMounted(() => {
        console.log('onMounted')
    }),
    onUpdated(() => {
        console.log('onUpdated')
    })
  }
}

相关文章

网友评论

      本文标题:vue3.0 生命周期钩子

      本文链接:https://www.haomeiwen.com/subject/taphdrtx.html