vue3中用什么替代$once

Question

mounted () {
  window.addEventListener('online', this.handleOnline)
  this.$once('hook:beforeDestroy', function () {
    window.removeEventListener('online', this.handleOnline)
  })
},

vue2中可以用$once加hook:beforeDestroy
而在vue3中没有$noce,怎么用hook:beforeDestroy呢？
或者说，不在setup里调用声明周期，在mounted里怎么调用到其他生命周期呢？

Answer 1

其实你的这个需求是不需要用到 once 的特性的。

在组件的一次生命周期里 mounted 和 beforeUnmount（原 beforeDestroy）都只会触发一次（这也是钩子的 once 特性被移除的原因，确实需要的时候（updated 等）也可以自己外部实现，普通的事件仍可以用 .once 指令）。

你只需要常规地添加生命周期回调即可：

import { onMounted, onBeforeUnmount } from 'vue'

onMounted(() => {
  window.addEventListener('online', handleOnline)
})

onBeforeUnmount(() => {
  window.removeEventListener('online', handleOnline)
})

如果想在 mounted 里添加其他生命周期回调，只需要嵌套调用：

import { onMounted, onBeforeUnmount } from 'vue'

onMounted(() => {
  window.addEventListener('online', handleOnline)

  // 实际上是不必要的，因为 beforeUnmount 一定在 mounted 之后执行
  onBeforeUnmount(() => {
    window.removeEventListener('online', handleOnline)
  })
})

在 mounted 回调里添加其他生命周期回调，通常只有发结合 router 特有的生命周期一起使用时才会发生：

import { onMounted } from 'vue'
import { onBeforeRouteUpdate } from 'vue-router'

onMounted(() => {
  // 确保在组件 mounted 后才触发 beforeRouteUpdate 钩子
  onBeforeRouteUpdate(() => {
    // do something...
  })
})