Vue3-生命周期

vue3 的相关知识点：ref，reactive，computed，watch，watchEffect，toRef，toRefs 这些响应式的API，相信大家对 vue3 已经有一定的理解了。

• 除了这些函数 vue3 还增加了些生命周期，可以直接导入 onXXX 一族的函数来注册生命周期钩子：与 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

  setup是围绕beforeCreate和created生命周期钩子运行的，所以不需要显示的定义他们，

  换句话说在这些钩子中编写的任何代码都应该直接在setup函数中编写

  生命周期

• 这些生命周期钩子注册函数只能在 setup() 期间同步使用， 因为它们依赖于内部的全局状态来定位当前组件实例（正在调用 setup() 的组件实例）, 不在当前组件下调用这些函数会抛出一个错误。
  生命周期的用法和 vue2 无太大的区别，只是使用的时候记得把 API 导入进来。

  import { onMounted, onUpdated, onUnmounted } from 'vue'
  
  const MyComponent = {
    setup() {
      onMounted(() => {
        console.log('mounted!')
      })
      onUpdated(() => {
        console.log('updated!')
      })
      onUnmounted(() => {
        console.log('unmounted!')
      })
    },
  }

赏

谢谢你请我吃糖果

支付宝

微信