在vue中使用路由器更改视图时销毁我的计数器实例

Posted 2023-03-07

【中文标题】在vue中使用路由器更改视图时销毁我的计数器实例

【英文标题】：Destroying instance of my counter when changing view using router in vue

【发布时间】：2021-01-07 15:22:21

【问题描述】：

我在我的 vue 应用程序中使用 vue-router。在我的一个组件中，我在 requestAnimationFrame 中有一个简单的计数器。但是每次我从 Page2 （计数器所在的位置）更改为 Page1 并返回到 Page2 时，我似乎都得到了我的计数器的一个新实例。我该如何解决，以便在交换页面时完全删除我的最后一个计数器？用下图说明问题：

两次进入第2页后

如你所见，两个数列向上计数

我也尝试删除 debugInc 的实例，但得到：

this.debugInc.destroy is not a function

我的代码在下面和这里的 repo 中： https://github.com/reppoper/forumpost

App.vue

<template>
  <div id="app">
    <router-link to="/">Page1</router-link> | 
    <router-link to="/page2">Page2</router-link> 
     <router-view />
  </div>
</template>

<script>
export default 
  name: 'App',
  components: 
  

</script>

Helloworld.vue

<template>
  <div class="hello">
    <h1>HELLO</h1>
  </div>
</template>

<script>
export default 
  name: 'HelloWorld',

</script>

Goodbyeworld.vue（计数器在哪里）

<template>
  <div class="hello">
    <h1>GOODBYE</h1>
  </div>
</template>

<script>
export default 
  name: "HelloWorld",

  data: function () 
    return 
      debugInc: 0,
    ;
  ,

  created() 
    this.loop();
  ,

  methods: 
    loop() 
      requestAnimationFrame(this.loop);
      console.log(this.debugInc);
      this.debugInc = this.debugInc + 1;

      if (this.debugInc > 59) 
        this.debugInc = 0;
      
    ,
  ,
  beforeDestroy() 
    console.log("DESTROY");
    this.debugInc.destroy();
  ,
;
</script>

我的看法：

Page1.vue

<template>
    <div>
        <HelloWorld/>
    </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";
export default 
    components: 
        HelloWorld
    

</script>

Page2.vue

<template>
  <div>
    <GoodbyeWorld />
  </div>
</template>

<script>
import GoodbyeWorld from "../components/GoodbyeWorld.vue";
export default 
  components: 
    GoodbyeWorld,
  ,
;
</script>

【参考方案1】：

requestAnimationFrame 将请求的 ID 作为整数值返回。您必须存储此 ID，当 vue 组件被销毁时，您应该使用相同的 ID 调用 cancelAnimationFrame。

export default 
name: "HelloWorld",

data: function () 
    return 
        debugInc: 0,
        id: null,
    ;
,

created() 
    this.loop();
,

methods: 
    loop() 
        this.id = requestAnimationFrame(this.loop);
        console.log(this.debugInc);
        this.debugInc = this.debugInc + 1;

        if (this.debugInc > 59) 
            this.debugInc = 0;
        
    ,
,
beforeDestroy() 
    console.log("DESTROY");
    cancelAnimationFrame(this.id);
,

;