vue3的生命周期

vue3的生命周期

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

import { onMounted, onUpdated, onUnmounted } from 'vue'

const MyComponent = {

  setup() {

    onMounted(() => {

      console.log('mounted!')

    })

    onUpdated(() => {

      console.log('updated!')

    })

    onUnmounted(() => {

      console.log('unmounted!')

    })

  },

}

这些生命周期钩子注册函数只能在 setup() 期间同步使用， 因为它们依赖于内部的全局状态来定位当前组件实例（正在调用 setup() 的组件实例）, 不在当前组件下调用这些函数会抛出一个错误。

生命周期的用法和 vue2 无太大的区别，只是使用的时候记得把 API 导入进来。