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

Question

我有一个使用 Vue.js 设置的简单网站。每个页面都有一个组件（关于我们、联系我们等）。每个组件通过 ajax 获取页面的标记，然后使用 <vue-router> 注入它。

到目前为止一切顺利。

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

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

我想我想对如何最好地管理多个组件的 JS 以及它如何与 document.ready 和 window.load 回调联系在一起，一旦他们已经被解雇并且不会再次开火。谢谢。

Answer 1

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

不，这不能很好地利用您的时间/工作/精力。在它开始成为问题之前不要担心性能。

Vue 以created 和mounted 的形式对document.ready 有类似的回调，但是这些是每个组件，而文档是每个.. 文档？

如果您为您的router-view 使用keep-alive 包装器，则应使用activated、deactivated 回调来执行工作，例如重置组件状态。

如果没有，那么组件会在离开路由时被销毁，您无需重置任何内容。

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

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