Vue.js: best practice with managing JS for other components

Question

I have a simple website set up with Vue.js. I have a component for each page (About us, Contact us, etc). Each component fetches the markup for the page via ajax then injects it using <vue-router>.

So far so good.

My question is: what should I do with all the JS that's only used for specific components? My home page might have ~100 lines of JS just for setting up image sliders, hover events, etc. Once I load the About Us component, all that JS for the home page still exists in the browser but it's no longer relevant. Should I manually be nullifying my variables?

What about this case: User visits the Home page, then the About page, then back to Home. On the 2nd visit of the home page, all my old variables still exist, but aren't necessarily in the correct state anymore. I'll want to move sliders back to slide 1, reset any hovers... basically just reset the page.

I guess I'm asking for a very high level overview on how to best manage the JS for multiple components and how it all ties in with document.ready and window.load callbacks once they've already fired and won't fire again. Thanks.

This question as it exists is a bit broad. You shouldn't worry about javascript memory limits as you'll likely never run into them - instead, optimize for reducing the number of bytes on the wire. Variables and whatnot that need to be restored between different parts of your application should be taken care of Vue.js, no? — Qix - MONICA WAS MISTREATED, Aug 15 '17 at 19:39
For the second one: [Is there a proper way of resetting a component's initial data in vuejs?](https://stackoverflow.com/questions/35604987/is-there-a-proper-way-of-resetting-a-components-initial-data-in-vuejs) — yuriy636, Aug 15 '17 at 19:41
@Qix "Variables and whatnot that need to be restored between different parts of your application should be taken care of Vue.js" I'm not sure, this is my first Vue project............... yuruy683, thanks for the link! — somebodysomewhere, Aug 15 '17 at 19:44

score 1 · Answer 1 · answered Aug 15 '17 at 19:46

Should I manually be nullifying my variables?

No, this is not a good use of your time/work/effort. Don't worry about performance until it starts to become an issue.

Vue has analogous callbacks for document.ready in the forms of created and mounted, but these are per component whereas document is per.. document?

If you are using the keep-alive wrapper for your router-view, you should use the activated, deactivated callbacks to perform work, such as resetting component state.

If not, then components are destroyed upon leaving the route, and you don't have to reset anything.

As for resetting, i tend to define a function that returns the initial state, and then use this function whenever i need a state reset.

<script>

function initialState(){
    return {
        test:'hi',
    }
}

export default {
    data(){
        ...initialState(),
        hello: 'yoyo', //state that doesn't need to be reset.
    },
    activated(){//user has returned to this route
        Object.assign(this.$data, initialState())
    }
}

</script>

It looks like Vue's `created` and `mounted` are what I was searching for. I'm not using 'keep-alive' but I'm going to give it another look because in retrospect it might be what I need. Thanks a lot — somebodysomewhere, Aug 15 '17 at 19:58

Vue.js: best practice with managing JS for other components

1 Answers1