beforeDestroy not invoked

[fpoliquin]

Hi,

I just created a sample Vue/Typescript app using Toilal/vue-webpack-template. Everything is working great (compilation, lint, hot reload, etc.).

I defined a small popup component to test different features and I've hit a problem with the beforeDestroy hook. It does not get invoked.

Here is my code:

import Vue from 'vue'
import Component from 'vue-class-component'
import WithRender from './Popup.html?style=./Popup.css'

@WithRender
@Component
export default class Popup extends Vue {

    ...

    mounted() {
        console.info('mounted')
        window.addEventListener('keyup', this.onKeyup)
    }

    beforeDestroy() {
        console.info('beforeDestroy')
        window.removeEventListener('keyup', this.onKeyup)
    }
}

The mounted hook is getting invoked. I've tried the same approach with the standard webpack template and it worked.

I'm using the latest versions :
"vue": "^2.2.6",
"vue-class-component": "^5.0.1",
"vue-router": "^2.4.0"

Thanks for your help.

[ktsn]

Sorry, I could not reproduce. Can you provide a complete reproduction?
https://jsfiddle.net/ktsn/j1f5dgp3/2/

[fpoliquin]

Hi @ktsn,

I tried to reproduce in fiddle but I wasn't able to setup the router.

I see in your example that you are calling vm.$destroy explicitly, do I have to do this if I am using the router ? I expect my components to get destroyed when I navigate, is my assumption right ?

[fpoliquin]

I've updated the fiddle with the router component but I cannot reproduce. I'll try to see what are the differences between the fiddle and my code.

[fpoliquin]

I've tracked it down a little further. When I replace the @WithRender with an inline template, the hook gets invoked. So it seems related with vue-template-loader.

Here are the steps to reproduce:

$ npm install -g vue-cli
$ vue init Toilal/vue-webpack-template my-project
$ cd my-project
$ npm install
$ npm run dev
Replace main.ts
Add Popup2.html

main.ts

import Vue from 'vue'
import Router from 'vue-router'
import Component from 'vue-class-component'

import WithRender from './Popup2.html'

@Component({
    template:
    `<div id="app">
        <router-link to="/">/home</router-link>
        <router-link to="/popup1">/popup1</router-link>
        <router-link to="/popup2">/popup2</router-link>
        <router-view></router-view>
    </div>`
})
class App extends Vue {
}

@Component({template: '<p>Home</p>'})
class Home extends Vue {
}

@Component({template: '<p>Popup</p>'})
class Popup1 extends Vue {
    mounted() {
        console.info('mounted popup1')
    }

    beforeDestroy() {
        console.info('beforeDestroy popup1')
    }
}

@WithRender
@Component
class Popup2 extends Vue {
    mounted() {
        console.info('mounted popup2')
    }

    beforeDestroy() {
        console.info('beforeDestroy popup2')
    }
}

Vue.use(Router)

let router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/popup1',
      component: Popup1
    },
    {
      path: '/popup2',
      component: Popup2
    }
  ]
})

Vue.config.productionTip = false

// tslint:disable-next-line:no-unused-new
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

Popup2.html

<p>Popup 2</p>

[ktsn]

Thank you for the reproduction. I'll looking into it.

[mj-hd]

I fixed this issue! PR is here.

[ktsn]

@mjhd-devlion Cool, thanks!