javascript - 如何动态添加 Vue 生命周期监听器

Question

我有一些函数需要在 vue 组件被销毁时调用，但在事件创建之前我不一定知道它们是什么。

有没有办法为 vue 生命周期事件动态添加监听器？

我要实现的目标:

...methods: {
    logOnDestroy(txt) {
        this.$on('beforeDestroy', () => {
            console.log(txt)
        }
    }
}

但是目前还没有调用它。有没有其他方法可以在运行时以编程方式将监听器绑定(bind)到组件生命周期事件？

Answer 1

你可能会问，能不能简单点？

来自 Vue.js Component Hooks as Events , 这就是你要找的语法

this.$once('hook:beforeDestroy', () => {

我不确定您打算如何使其动态化，但这里是对 Vue CLI 的默认 HelloWorld 应用程序中的 logOnDestroy() 方法的改编，

演示

Vue.component('helloworld', {
  template: '<h1>{{ msg }}</h1>',
  name: 'helloworld',
  props: { msg: String },
  mounted() {
    this.logOnDestroy('Goodbye HelloWorld')
  },
  methods: {
    logOnDestroy(txt) {
      this.$once('hook:beforeDestroy', () => {
        console.log(txt)
      })
    }    
  }
});

new Vue({
  el: '#app',
  data: {
    showHello: true
  },
  mounted() {
    setTimeout(() => {
      this.showHello = false
    }, 3000)
  }
});
Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <img alt="Vue logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/277px-Vue.js_Logo_2.svg.png" style="height: 50px;">
  <helloworld v-if="showHello" msg="Welcome to Your Vue.js App"/>
</div>