Question

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

到目前为止一切顺利。

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

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

我想我要求就如何最好地管理多个组件的JS以及它们与document.ready和window.load回调的关系进行一次非常高级的概述。已经开除并再次开火。感谢。

Answer 1

我应该手动取消变量吗？

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

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

如果您使用keep-alive封装器router-view，则应使用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>

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

1 个答案: