javascript - 从同一组件的方法中调用 VueJS 生命周期 Hook

Question

我在“容器”组件中使用 VueJS 的 mounted Hook 来获取构建 View 的数据。当该容器被销毁时，我使用 beforeDestroy 和 destroyed 生命周期 Hook 来“清理”组件。

这三个钩子(Hook)不会在路由更改为同一路由但参数不同时调用。建议的处理方法是监听 watch 中的 $route 变化，如下所示:

watch: {
  '$route' (to, from) {
    this.id = to.params.id
    this.getPageData()
  }
}

但是，我没有从 mounted、beforeDestroy 和 destroyed 复制逻辑，而是希望做这样的事情:

watch: {
  '$route' (to, from) {

    // Manually run lifecycle clean-up hooks
    this.beforeDestroy()
    this.destroyed()

    // Update Id, and run mounted
    this.id = to.params.id
    this.mounted()
  }
}

不幸的是，钩子(Hook)似乎没有在 $vm 上公开。有没有一种我不知道的方法可以做到这一点？我错过了一些明显的东西吗？或者是否有更好/首选的方法？

Answer 1

您可以将每个生命周期 Hook 内的代码提取到一个组件方法中，然后在两个地方调用该方法。这是一个例子:

mounted: function() {
    this.__mounted();
},

methods: {
    __mounted() {
        //mounted code here
    }
},

watch: {
  '$route' (to, from) {
        this.__mounted();
  }
}