vue2.0和vue3.0生命周期函数对比?

x33g5p2x  于2022-03-18 转载在 其他  
字(0.6k)|赞(0)|评价(0)|浏览(310)

一、写在前面
今天总结一下,vue2.0和vue3.0的生命周期函数。
二、对比

options apisetup api
beforeCreatenot needed
creatednot needed
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeUnmountonBeforeUnmount
unmountedonUnmounted
errorCapturedonErrorCaptured
renderTrackedonRenderTracked
renderTriggeredonRenderTriggered
activatedonActivated
deactivatedonDeactivated

因为setup是围绕着beforeCreatecreated生命周期钩子运行的,所以不需要显示的定义他们。换句话说,在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。
三、用法
setup中的函数,接收一个回调函数,当钩子被组件调用时将会被被执行。

// MyBook.vue

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

相关文章