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

时间:2018-01-09 16:34:35

标签: javascript vue.js vuejs2 vue-router

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

当路线更改为相同路线但具有不同参数时,这三个挂钩被调用。建议的处理方法是通过在$route中监听watch更改,如下所示:

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

但是,我没有从mountedbeforeDestroydestroyed复制逻辑,而是希望做到这样的事情:

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上。有没有办法实现这一点,我不知道?我错过了一些明显的东西吗或者有更好的/首选的方法吗?

1 个答案:

答案 0 :(得分:2)

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

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

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

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