在vue的mounted下使用setInterval的誤區

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)

效果顯示正常，如有大咖有更通俗的解釋，望糾正指教，謝謝