Vue中methods实现原理是什么

 <div class="app">
        <h1>{{msg}}</h1>
        <button @click="app">+1</button>
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:'this指向问题',
                count:0
            },
            methods:{
                app(){
                    console.log(this);
                    console.log(vm === this);
                }
            }
        })
    </script>

 app2:()=>{
                    console.log(this);
                    console.log(vm === this);
                }

   <div class="app">
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:'methods的实现原理'
            },
            methods:{
                app(){
                    alert('hh')
                }
            }
        })
    </script>

// 定义一个类
class Vue {
    // 定义构造函数
    // options是一个纯粹的js对象：{}
    constructor(options){
        // 获取所有的方法名
        Object.keys(options.methods).forEach((methodName,index)=>{
            // 给当前的Vue实例一个扩展方法
            this[methodName] = options.methods[methodName]
        })
    }
}

 <div class="app">
    </div>
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:'methods的实现原理'
            },
            methods:{
                app(){
                    alert('hh')
                },
                app2(){
                    alert('xx')
                }
            }
        })
    </script>