新手,vue的mounted的问题

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">{{value}}</div>
<script>
    new Vue({
        el: '#app',
        data(){
            return {value:42}
        },
        mounted(){
            setTimeout(this.a,1000)
        },
        methods:{
            a(){
                this.value++
                console.log(this.value)
                setTimeout(this.a,1000)
            }
        }
    })
</script>

这里的功能就是让a一秒加一次,为什么在mounted和a()里面都setTimeout了一秒,这不就是两秒的延迟才+1吗。这段代码的运行过程是怎样的?

阅读 33.2k
2 个回答

mounted是vue实例挂载的事件钩子函数,所以它只会执行一次,之后就是a方法内不断设置定时器。
也就是说,页面打开,等vue实例挂载后,页面显示的value为42,之后每过1svalue值加1.
因为你的a方法是立即加1的,所以mounted钩子执行时,1s后会立即让value值加1,并不会有两个定时器相叠加为2s。

新手上路,请多包涵

每一秒后往事件任务队列放入a,如果当前队列没有其他任务执行的话就是1秒执行一次a

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题