【Vue踩坑之一】箭头函数的this指向

FrequencyStar

于 2020-07-29 21:39:28 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue官方文档入门文章标签： vue es6

本文链接：https://blog.youkuaiyun.com/FrequencyStar/article/details/107675844

Vue官方文档入门专栏收录该内容

15 篇文章

订阅专栏

本文探讨了Vue中使用箭头函数时遇到的问题，重点在于箭头函数没有自己的`this`，而是继承自定义它时的上下文。当在`methods`中使用箭头函数，`this`不会指向Vue实例，导致访问不到`message`属性，从而引起错误。官方文档对此有明确的警告。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【一】methods箭头函数的this指向

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象

<body>
    <h1 id="app">
        <span>{{message}}</span><br />
        <button v-on:click="reverseMessage">逆转消息</button>
    </h1>

    <script>
        let vue = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue.js'
            },
            methods: {
                /*
           * Vue methods中使用箭头函数要注意，this的指向
           */
                // reverseMessage: () => {
                //   console.log(this) //这里this指向windows
                //   vue.message = vue.message.split('').reverse().join('')
                // }

                reverseMessage: function () {
                    console.log(this) //这里this指向vue
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>