导语：从源码中学Vue（二）彻底搞清楚methods中的方法原理

欢迎来到我的《从源码中学Vue》专题系列文章，更多精彩内容持续更新中，欢迎关注 ：)

在上一章节，我通过阅读vue源码，分析了vue项目的基础目录和的基本原理，生命周期各个钩子函数的在调用时机。

我们在写vue的时候，一般都是将方法写到methods对象下。正常来说，我们想访问methods下面的方法，我们至少要通过this.methods.方法去调用，然而我们是直接在vue的实例对象下调用，源码内部做了什么？

我们在methods中的方法中，可以直接通过this去访问到data中的数据，直接越过了methods对象，源码它做了什么？？

带着这两个疑问，我们去找一下vue的源码，一探究竟吧~

本章目标

Vue中的Methods方法中为什么能直接用this访问到data中的数据为什么我们可以直接通过this访问到methods中的方法。

熟悉vue的都知道，methods是一个对象，里面存储了整个我们需要的方法。举个例子

一个最基础的示例就出来了。我们来运行一下这个示例。

来分析一下这个methods，我们大概可以得到两个结论：

在methods中定义的方法，可以直接访问到Vue实例对象下的data中的数据。我们在mounted钩子函数中可以通过this访问到methods里面的方法。

带个这两个结论，我们尝试着去阅读下它里面的源码是如果实现的。

首先我们找到这个处理methods的源码位置

它在state.js里面，打开它，很容易就找到了一个叫initMethods的函数。

别看这里面有一大坨代码，其实核心的就是我圈出来的一行。再来找下源码中是如何调用它的。

我圈出来的就是了，可以看到传的两个实数。第一个vm表示的是vue的实例，第二个参数就是我们传进去的methods对象了。知道了实参，我们反过来去分析形参

首先，第二个形参methods就是我们传进来的methods了，所以源码接着通过for in 循环这个methods对象

其中for in 循环中的key 就是我们的方法名了。

再来看最后一行代码

可以看到，vm[key]这一步骤就解释了为什么我们可以通过this去访问到methods中的方法了，是因为源码中将methods中的所有的方法都挂载到了this实例下面了。

继续往后看

首先源码中作了一个判断，如果说我们在methods中定义的可能不是函数，那么则返回一个空函数，这里面noop就是一个空函数。它的源码是这样的

不光在vue中，jquery中的源里也用noop作为一个空函数

再来看定义的是一个函数的时候，源码中调用了

bind(methods[key], vm)

首先，methods[key]返回的是函数的定义了。那么这个bind是什么意思？看过我之前分享有关面向对象文章的都应该知道，这应该就是ES5中为我们提供改变this指向的函数了。

不信？

那我们去找下他的源码吧（node_modules\vue\src\shared\util.js）

可以看到，它首先去找Function的原型下的bind方法，如果存在，就调用nativeBind原生的bind，没有的话就是polyFillBind 兼容性的bind了，很显然，这个bind方法在ES5标准中已经实现。

 关于polyFillBind自定义的bind方法我前面的文章中有实现，原理和源码中不太一样。但是效果一样。

所以我们就来看下这个nativeBind的实现吧。

它传入了两个参数，1、要调用的函数，2、改变函数的this指向

好，再回过头我们去看下刚才的 bind(methods[key], vm)就好理解了。在我们调用methods里面的方法的时候，我们已经将该方法的this指向了vm，即我们的vue实例。

所以我们在methods中可以正常访问到vm下的data数据了。

总结：

我们能够在methods的方法里面直接访问到vm实例，是因为源码帮我们做了this指向为vm我们能在钩子函数中直接访问到methods中的方法，是因为源码帮我们将methods中的所有的方法都挂载到了vm的实例下了。

这里是畅哥聊技术 《从源码中学Vue》系列文章，更多精彩内容持续更新中，敬请期待。

未完待续。。。

本文内容由小熊整理编辑！