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>