<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吗。这段代码的运行过程是怎样的?
mounted
是vue实例挂载的事件钩子函数,所以它只会执行一次,之后就是a方法内不断设置定时器。也就是说,页面打开,等vue实例挂载后,页面显示的value为42,之后每过1s
value
值加1.因为你的
a
方法是立即加1的,所以mounted钩子执行时,1s后会立即让value值加1,并不会有两个定时器相叠加为2s。