从源码中学Vue(二)彻底搞清楚methods中的方法原理( 三 )

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

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

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

再来看最后一行代码

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

继续往后看

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

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

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

推荐阅读