methods中定义了Vue实例的方法，官网是这样介绍的:

例如::

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>

    <title>Document</title>

</head>

<body>

    <div id="app">{{message}}<button @click="ChangeMessage">测试按钮</button></div>

    <script>

        new Vue({

            el:'#app',

            data:{message:"Hello World!"},

            methods:{

                ChangeMessage:function(){this.message="Hello Vue!";}

            }

        })

    </script>

</body>

</html>

显示的样式为:

当我们点击按钮后变为了:

methods方法中的上下文为当前实例，也就是this为当前实例。

注:不应该使用箭头函数来定义 method 函数 (例如ChangeMessage:()=>this.message="Hello Vue")。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.message 将是 undefined。

源码分析

Vue实例后会先执行_init()进行初始化(4579行)时，会执行initState()进行初始化,如下:

function initState (vm) { //第3303行

  vm._watchers = [];

  var opts = vm.$options;

  if (opts.props) { initProps(vm, opts.props); }

  if (opts.methods) { initMethods(vm, opts.methods); }        //如果定义了methods，则调用initMethods初始化data

  if (opts.data) {

    initData(vm);

  } else {

    observe(vm._data = {}, true /* asRootData */);

  }

  if (opts.computed) { initComputed(vm, opts.computed); }

  if (opts.watch && opts.watch !== nativeWatch) {

    initWatch(vm, opts.watch);

  }

}

initMethods()定义如下:

function initMethods (vm, methods) { 　　//第3513行

  var props = vm.$options.props;

  for (var key in methods) {                 //遍历methods对象,key是每个键，比如例子里的ChangeMessage

    {

      if (methods[key] == null) { 　　　　　　　　//如果值为null，则报错

        warn(

          "Method \"" + key + "\" has an undefined value in the component definition. " +

          "Did you reference the function correctly?",

          vm

        );

      }

      if (props && hasOwn(props, key)) { 　　　　//如果props中有同名属性，则报错

        warn(

          ("Method \"" + key + "\" has already been defined as a prop."),

          vm

        );

      }

      if ((key in vm) && isReserved(key)) { 　　//如果key是以$或_开头则，也报错

        warn(

          "Method \"" + key + "\" conflicts with an existing Vue instance method. " +

          "Avoid defining component methods that start with _ or $."

        );

      }

    }

    vm[key] = methods[key] == null ? noop : bind(methods[key], vm);             //如果key对应的值不是null，则执行bind()函数

  }

}

执行bind()函数，参数1为对应的函数体，参数2是当前的Vue实例，bind()函数定义在第196行，如下:

function polyfillBind (fn, ctx) {            //当Function的原型上不存在bind()函数时，自定义一个函数实现同样的功能，用apply()或call()来实现

  function boundFn (a) {

    var l = arguments.length;

    return l

      ? l > 1

        ? fn.apply(ctx, arguments)

        : fn.call(ctx, a)

      : fn.call(ctx)

  }

  boundFn._length = fn.length;

  return boundFn

}

function nativeBind (fn, ctx) {             //调用Function的原型上的bind()方法，上下文闻ctx

  return fn.bind(ctx)

}

var bind = Function.prototype.bind             //如果Function的原型上有bind方法，则调用该方法，否则用自定义的polyfillBind()方法

  ? nativeBind

  : polyfillBind;

相比较其它API，method的实现是比较简单的。

Vue.js 源码分析(五) 基础篇 方法 methods属性详解的更多相关文章

  1. Vue.js 源码分析(十三) 基础篇 组件 props属性详解

    父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...

  2. Vue.js 源码分析(十一) 基础篇 过滤器 filters属性详解

    Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...

  3. Vue.js 源码分析(四) 基础篇 响应式原理 data属性

    官网对data属性的介绍如下: 意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方 ...

  4. Vue.js 源码分析(三) 基础篇 模板渲染 el、emplate、render属性详解

    Vue有三个属性和模板有关,官网上是这样解释的: el ;提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标 template ;一个字符串模板作为 Vue 实例的标识使用.模板将会 ...

  5. Vue.js 源码分析(二) 基础篇 全局配置

    Vue.config是一个对象,包含Vue的全局配置,可以在启动应用之前修改下列属性,如下: ptionMergeStrategies        ;自定义合并策略的选项silent         ...

  6. Vue.js 源码分析(九) 基础篇 生命周期详解

    先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated   .beforeDes ...

  7. Vue.js 源码分析(八) 基础篇 依赖注入 provide/inject组合详解

    先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和 ...

  8. Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解

    先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...

  9. Vue.js 源码分析(十) 基础篇 ref属性详解

    ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例,例如: ...

随机推荐

  1. ICSharpCode.SharpZipLib 中文乱码问题

    今天在调用ICSharpCode.SharpZipLib解压zip文件时出现了中文文件乱码的问题. 解决过程如下: 1.判断是否压缩包本身问题.经查zip文件夹在本地直接解压打开时正确的中文名称,所以 ...

  2. Git内部原理浅析

    Git独特之处 Git是一个分布式版本控制系统,首先分布式意味着Git不仅仅在服务端有远程仓库,同时会在本地也保留一个完整的本地仓库(.git/文件夹),这种分布式让Git拥有下面几个特点: 1.直接 ...

  3. SQL的简单函数(极客时间)

    SQL的函数 函数就是将我们经常使用的代码封装起来, 需要的时候直接调用, 提高代码效率和可维护性. SQL函数一般是在数据上执行, 可以方便地转换和处理数据. 常用的SQL函数 SQL提供了一些常用 ...

  4. [b0011] windows 下 eclipse 开发 hdfs程序样例 (三)

    目的: 学习windows 开发hadoop程序的配置. [b0007] windows 下 eclipse 开发 hdfs程序样例 太麻烦 [b0010] windows 下 eclipse 开发 ...

  5. K8s容器编排

    K8s容器编排 Kubernetes(k8s)具有完备的集群管理能力: 包括多层次的安全防护和准入机制 多租户应用支撑能力 透明的服务注册和服务发现机制 内建智能负载均衡器 强大的故障发现和自我修复能 ...

  6. Error: EACCES: permission denied, mkdir

    今天在全局安装飞冰的时候,出现标题的错误 想到是权限不够的问题,其实飞冰官网也有解决的办法,就是更改npm的默认路径.我之前就是用了更改默认路径的方法,然后后来又恢复了默认路径,所以还是用默认路径加权 ...

  7. SQLAlchemy(1)

    介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB API之上,使用关系对象映射进行数据库操作,简言之便是:将类和对象转换成SQL,然后使用数据API执行SQL并获取 ...

  8. 0.Jenkins 介绍

    一.持续集成的概念 continuous  intergaration  (简称CI),持续集成. 持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通常每个成员每天至少集成一次,也就意味 ...

  9. Kubernetes 集群分析查看内存，CPU

    Kubernetes方式 top命令查看所有pod,nodes中内存,CPU使用情况 查看pod root @ master ➜ ~ kubectl top pod -n irm-server NAM ...

  10. pinpoint 安装指南

    tangcheng@ChenTang MINGW64 /c/Developer $ git clone https://github.com/naver/pinpoint.git Cloning in ...