1. vue对象的生命周期
1). 初始化显示(只执行一次)
* beforeCreate()
* created()
* beforeMount()
* mounted()
2). 更新状态(可执行多次)
* beforeUpdate()
* updated()
3). 销毁vue实例: vm.$destory()(只执行一次)
* beforeDestory()
* destoryed()
2. 常用的生命周期方法
created()/mounted(): 发送ajax请求, 启动定时器等异步任务
beforeDestory(): 做收尾工作, 如: 清除定时器
前几天刚开始学vue就碰到了vue里面的坑,在vue生命周期的mounted使用定时器,用了匿名函数作为回调函数,结果没有任何效果,代码入下
<div id="test"> <button>vue的生命周期</button> <p v-show="isShow">你是佩奇吗</p> </div> <script type="text/javascript" src="../js/vue.js"></script> <script> new Vue({ el:'#test', data:{ isShow:true } , mounted() { setInterval(function (){ this.isShow=!this.isShow; },1000) } }); </script>
查阅了一下,发现下面这种写法,存在一个问题,当前this指向的是当前的定时器positionTimer
mounted() { setInterval(function (){ this.isShow=!this.isShow; },1000) }
使用了lambda表达式(箭头函数)替换匿名函数的写法,当前this指向的是外部的vue对象
mounted() { setInterval(()=>{ this.isShow=!this.isShow; },1000)
效果显示正常,如有大咖有更通俗的解释,望纠正指教,谢谢