Vue 中methods使用箭头函数冲突

Vue中箭头函数的冲突

小白记录自己学习过程，欢迎指点 学完h5，c3，js，迫不及待的开始学习Vue框架，前段时间打算写一个常见的计数器小案例，遇到了一个小错误。在这里记录下，希望大家不会遇到。

在写计数器的案例时，灵光一闪打算用ES6中的箭头函数，刚学完打算拿来练练手

    <div id="app">
        <button @click='add'>+</button>
        <button @click='sub' v-show="num>0">-</button>
        <br>
        当前数字:{{num}}
    </div>
     <script>
        let app = new Vue({
            el: '#app',
            data: {
                num: 1
            },
            methods: {
                add: () => {
                        this.num++;
                },
                sub: () => {
                    this.num--;
                }
            }
        })
        </script>

结果无论怎么点，num都不变化

开始以为是因为刚开始使用Vue还不熟练，data里的变量没有定义好，重新检查，重新定义，并没有用，然后在控制台输出测试发现this.num是undefined

       add: () => {
                console.log(this.num);
                this.num++;
        },

说明this没有指向Vue实例，而是指向了其他地方

查阅w3c文档，发现：

箭头函数没有自己的 this。它们不适合定义对象方法。箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。所以箭头函数的this是固定的，不能改变或者重新绑定

再查阅Vue官方文档发现已经提醒用户不要使用箭头函数：

最后就用普通的函数构造方法。。。

        add: function () {
                this.num++;           
        },
        sub: function () {
            this.num--;
        }

一切正常

虽然有点丢人...但发现了自己的不足，加深了对ES6箭头函数和Vue的理解，值了。。。学习嘛 路漫漫其修远兮