[bug] `beforeDestroy` lifecycle methods not called on Vue components (memory leak)

[trusktr]

Bug Report

I noticed that when using Vue in a script tag, the components are not cleaned up when navigating away from the page.

Steps to reproduce

Put the following in your markdown file:

<div id="example"></div>
<script type="application/javascript">
  new Vue({
    el: '#example',
    template: `
      <div>blah blah</div>
    `,
    beforeDestroy() {
      debugger . // it never pauses here.
      console.log('DESTROY VUE COMPONENT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!')
    },
  })

  console.log('test') // NOTE, this returns undefined.
</script>

What is current behaviour

When you switch pages, you will not see DESTROY VUE COMPONENT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! in the console.

What is the expected behaviour

We should see DESTROY VUE COMPONENT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! in the console.

beforeDestroy is not being fired, which means that components that need to clean up aren't cleaning up, and therefore will cause memory leaks.

Other relevant information

Note, I disabled executeScript from executing my script a second time, due to #906. I noticed there that it attempts to catch the return value of the script. That's definitely not foolproof.

• Bug does still occur when all/other plugins are disabled?

• Docsify version: 4.9.4

[trusktr]

As for a solution, I'm not sure. Docsify perhaps needs a way to detect which Vue components were instantiated on the page, and to call the $destroy method on them.

[trusktr]

The attempt there,

    window.__EXECUTE_RESULT__ = new Function(code)()

won't work anyways. There's no return statement, and people aren't going to think to put a top-level return statement inside their <script> tags (let alone think it will be executed twice which will cause an error in the console when the script gets executed by the browser, re #906).

[anikethsaha]

Note, I disabled executeScript from executing my script a second time, due to #906. I noticed there that it attempts to catch the return value of the script. That's definitely not foolproof.

executeScript should Be true in order to run your script that.
These scripts are executed by docsify after the mounting of the HTML code. (debatable 😕 )

window.__EXECUTE_RESULT__ = new Function(code)()

that's an IIFE. It should run the code mentioned in the argument as a whole.

From the image, you can see it's running the code, as usual, Not sure why the beforeDestroy is not working as I have not used Vue and just familiar with the outline. I think it's not related to the docsify code anyway.

Closing this,
please comment if you think it didnt help you with this explanation. or you something else to add upon
😃