methods的实现原理

一、直观的感受methods的使用

首先直观的感受methods方法的使用，同样以计数器为例，

    
    
    
    


    

        
{{msg}}
        
计数器：{{count}}
        加一
    
    
    
    

不难看出来，其methods中的方法是用来处理事件和执行相应逻辑的代码 。对于上述代码来说，其addOne()方法就是来处理的相应逻辑——实现不断加1的功能。在页面上点击按钮触addOne()方法，它就会执行 this.count++，让 count 增加。

二、 methods 的实现原理是什么？

Vue 实例初始化时到底发生了什么？—— 挂载方法

当我写下如下代码的时候 

new Vue({
    el : "#app",
    data:{
        msg: "回调函数中的this",
        count:0
    },
    methods:{
        addOne(){
            this.count++
        }
    }
})

Vue 会进行一系列的初始化操作。其中的一部分是初始化 methods —— Vue 会把我们写在methods 中的函数挂载到 Vue 实例（this）上。

举个比喻：你写了一堆工具（函数）放在工具箱（methods），Vue 会把它们一一拿出来，贴在你的“Vue 小人”身上（Vue 实例），这样你就能用 this.someMethod() 来调用。

那和通过this之间访问data有什么区别呢？是否也是通过数据代理机制来实现的呢？

三、和 data 的区别？

this.count访问count的时候是通过数据代理机制的getter方法来实现的，而通过Vue实例来访问methods中定义的方法使用的却不是数据代理机制，是通过 Vue 在初始化阶段，手动把 methods 中的函数“挂载”到 Vue 实例（vm）上实现的。

绑定的过程大致如下所示。

function initMethods(vm, methods) {
  for (let key in methods) {
    const method = methods[key]

    // 只接受函数，其他类型会报错
    if (typeof method !== 'function') {
      console.warn(`${key} is not a function`)
      continue
    }

    // 把方法“复制”到 Vue 实例上，并绑定 this
    vm[key] = method.bind(vm)
  }
}