最开始想的是在登陆页面使用一个three.js实现一个登陆的粒子动画，实现炫酷的登陆效果，但是实现了之后，在无数次的从其他页面返回到登陆页面时，页面就会越来越卡顿，首先想到的是动画在没有被销毁的情况下无数次被重画了，所以页面会越来越卡顿，当时第一时间想到的是，在页面destroyed的时候使用v-if采用watch监听，去销毁整个组件，然后每一次都重新渲染。。。。。。然而并没有用，当时探索了大半天，终于找到解决办法，如下：

在loginAnimate.js中设置flag变量，用来取消动画用，然后再执行render()函数济宁渲染的时候，执行动画并返回动画id：

function animate() {
  flag = requestAnimationFrame(animate);// 执行动画并且返回动画id
  render();
}

最后destroy()函数取消动画，每次返回到登陆页面时先执行此函数即可！！！！

function destroy() {
  cancelAnimationFrame(flag); // 取消动画
}

当时想了很久，现在记下来，以避免再出问题吧。。。

赏

做更好的自己~