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。

作者：fenerchen
链接：https://www.jianshu.com/p/3eabf16aee10