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

【一】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>

如果在上面代码的箭头函数中使用this代替vue的话,就会报如下错误:
在这里插入图片描述
原因就是函数找不到message,从而无法执行split方法

官方文档也给出了箭头函数的警告

image-20200730171545476

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页