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)

效果显示正常,如有大咖有更通俗的解释,望纠正指教,谢谢