请老师解答下面代码中的问题

来源：2-6 状态动画

weixin_慕村1291783

2020-12-26 20:37:17

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                num: 1,
                anum: 1
            }
        },
        methods: {
            handleAddItemClick() {
                const timer = setInterval(() => {
                        this.anum += 1
                        if (this.anum >= 10) {
                            clearInterval(timer)
                        }
                    }, 100)
                    // 为什么把判断写在定时器外面就不会停呢？
                    // if (this.anum >= 10) {
                    //         clearInterval(timer)
                    //     }

            }
        },

        template: `
        <div>{{anum}}</div>
        <button @click="handleAddItemClick">增加</button>
        `

    })
    const vm = app.mount('#root')
</script>

</html>