Vue子组件中的setInterval定时器无法停止

Question

1.我在子组件中定义了一个canvas动画，当我显示这个子组件的时候会利用setInterval来呈现出动画效果，可以我发现用clearInterval无法停止动画，请问是什么原因呢？2.已经尝试了created，updated，mounted，beforeDestroy时候调用setInterval，发现都不行,尝试在组件中加按钮添加click事件来调用setInterval发现无法触发click事件？刚接触Vue.js，如果问题问的比较sb,轻喷。最后，提前感谢大家！//子组件<template>  <div><canvas width="400" height="400" ref="drawing"></canvas></div></template><script>    export default {        mounted(){            //这里无法停止            var interval=setInterval(this.drawing,200);            if(this.width==290){            //这里不会打印出over,我用v-if隐藏了这个组件后会一直报错， var context=this.$refs.drawing.getContext("2d")这里一直报错，这说明clearInterval一直没起作用              console.log("over");              clearInterval(interval);            }        },        name: "canvas-animation",        data(){          return {width:100}        },        methods:{         drawing() {           var context=this.$refs.drawing.getContext("2d");           context.fillStyle="#409eff";           context.fillRect(10,10,this.width,this.width);           this.width=this.width+10;         }        }    }</script><style scoped></style>

Answer 1

因为 if(this.width==290){你只在第一次的时候检测了，后来的 interval 里没有去检测，所以失败。

//子组件

<template>

  <div><canvas width="400" height="400" ref="drawing"></canvas></div>

</template>

<script>

    var interval;//new added

    export default {

        mounted(){

            interval=setInterval(this.drawing,200);            

        },

        name: "canvas-animation",

        data(){

          return {width:100}

        },

        methods:{

         drawing() {

           var context=this.$refs.drawing.getContext("2d");

           context.fillStyle="#409eff";

           context.fillRect(10,10,this.width,this.width);

           this.width=this.width+10;

           if(this.width==290){

              console.log("over");

              clearInterval(interval);

            }

         }

        }

    }

</script>

<style scoped>

</style>