从同一组件上的方法中调用VueJS生命周期钩子

Question

我用VueJS的mounted钩子在我的“容器”的部件，以获取该构建视图的数据。 当该容器被销毁时，我使用beforeDestroy并destroyed生命周期钩子来“清理”组件。

当路由更改为相同路径但具有不同参数时， 不会调用这三个挂钩。 建议的处理方法是通过监听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()
  }
}

不幸的是，看起来挂钩不会暴露在$vm 。 有没有办法实现这一点，我不知道？ 我错过了一些明显的东西吗 或者有更好/首选的方法吗？

Answer 1

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

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

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

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