vue中this指向小记

普通函数中的的this指向取决于运行该函数的作用域，而箭头函数的this是定义时就固定了。
然而在vue中有一事不明：

<div id="app">
    <div v-on:click="onSurprise">惊喜点击</div>
    <div v-on:click="onSurprise1">惊喜点击1</div>
</div>
        <script>
            var app=new Vue({
                el:"#app",
                data:{
                    
                },
                methods:{
                    onSurprise:()=>{
                        console.log('箭头函数的'+this)
                    },
                    onSurprise1:function(){
                        console.log(this)
                    }
                }
                
            })

        </script>

分别点击控制台输出

箭头函数绑定的是window，而运行时的函数的作用域是vue
仔细想想好像也对，函数运行时是通过'app.函数名'调用的，所以onSurprise1的this指向app，而app是vue的实例。对于箭头函数，onSurprise是在全局window下定义的，所以this指向window。