箭头函数的使用

需求： 每过1秒显示隐藏教育

<div id="test">
    <button  @click="destoryVm">destory vm</button>
    <p v-show="isShow">教育</p>
</div>

错误案例

 new Vue({
    el: '#test',
     data: {
        isShow: true
     },
     mounted () { //初始化之后立即调用
         setInterval(function () { 
             that.isShow = !that.isShow
             console.log(this)
         }, 1000)
     }
 })

错误原因：这里setInterval调用匿名函数后导致this发送改变，变成了window

正确案例一

 new Vue({
    el: '#test',
      data: {
         isShow: true
      },
      mounted () { //初始化之后立即调用
		  var that = this; //保存this
           setInterval( () => {
                    this.isShow = !this.isShow;
                    console.log(this)
                }, 1000)
      },
       methods: {
                destoryVm(){
                    //干掉vm
                    this.$destroy();
                }
            },
      beforeDestroy () { //vm毁灭前调用
           //清除计时器
           clearInterval(this.intervalId);
       }
  })

正确案例二

 new Vue({
            el: '#test',
            data: {
               isShow: true
            },
            mounted () { //初始化之后立即调用
                setInterval(function () { //不能这样写，这个this不是指的vue
                    that.isShow = !that.isShow
                    console.log(this)
                }, 1000)
            }
        })

匿名函数使用箭头函数来是用，这种写法是不会有自己的this，所以会调用外部的this也就是vm