Javascript Vue.js：管理其他组件的js的最佳实践

我用Vue.js建立了一个简单的网站。我每个页面都有一个组件（关于我们、联系我们等）。每个组件通过ajax获取页面的标记，然后使用

将其注入

到目前为止还不错

我的问题是：我应该如何处理所有只用于特定组件的JS？我的主页可能有约100行JS，仅用于设置图像滑块、悬停事件等。一旦我加载了About Us组件，所有用于主页的JS仍然存在于浏览器中，但不再相关。我应该手动取消变量的值吗

这种情况如何：用户访问主页，然后访问关于页面，然后返回主页。在第二次访问主页时，我所有的旧变量仍然存在，但不一定再处于正确的状态。我想将滑块移回幻灯片1，重置任何悬停。。。基本上只是重置页面

我想我需要的是一个非常高层次的概述，关于如何最好地管理多个组件的JS，以及它如何与

document.ready

和

window.load

回调，一旦它们已经启动并且不再启动。谢谢

我应该手动取消变量的值吗

不，这不能很好地利用你的时间/工作/精力。不要担心性能，直到它开始成为一个问题

Vue对

文档有类似的回调。ready

以

创建的
和
装载的
的形式出现，但这些回调是针对每个组件的，而文档是针对每个组件的。。文件

如果您在
路由器视图中使用
保持活动
包装
，则应使用
已激活
、
已停用
回调来执行工作，例如重置组件状态

如果没有，那么组件在离开路由时将被销毁，您不必重置任何内容

至于重置，我倾向于定义一个返回初始状态的函数，然后在需要重置状态时使用该函数

<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>


函数initialState（）{
返回{
测试：'hi'，
}
}
导出默认值{
数据（）{
…initialState（），
您好：'yoyo'，//不需要重置的状态。
},
已激活（）{//用户已返回此路由
Object.assign（this.$data，initialState（））
}
}
这个问题存在的范围有点广。您不应该担心javascript内存限制，因为您可能永远不会遇到这些限制-相反，优化以减少连接上的字节数。需要在应用程序的不同部分之间恢复的变量和什么应该由Vue.js负责，不是吗？对于第二个：@Qix”需要在应用程序的不同部分之间恢复的变量和什么应该由Vue.js负责“我不确定，这是我的第一个Vue项目。。。。。。。。。。。。。。。玉如683，谢谢你的链接！看起来Vue的
创建的
和
装载的
就是我要搜索的。我没有使用“keep alive”，但我会再看一眼，因为回想起来，它可能正是我所需要的。谢谢