美文网首页
vue源码分析(九)核心函数之initMethods

vue源码分析(九)核心函数之initMethods

作者: vue爱好者 | 来源:发表于2020-04-21 20:49 被阅读0次

    我们打开文件 src/core/instance/state.js,找到定义initMethods函数的代码:

    function initMethods (vm: Component, methods: Object) {
      const props = vm.$options.props
      for (const key in methods) {
        if (process.env.NODE_ENV !== 'production') {
          if (typeof methods[key] !== 'function') {
            warn(
              `Method "${key}" has type "${typeof methods[key]}" in the component definition. ` +
              `Did you reference the function correctly?`,
              vm
            )
          }
          if (props && hasOwn(props, key)) {
            warn(
              `Method "${key}" has already been defined as a prop.`,
              vm
            )
          }
          if ((key in vm) && isReserved(key)) {
            warn(
              `Method "${key}" conflicts with an existing Vue instance method. ` +
              `Avoid defining component methods that start with _ or $.`
            )
          }
        }
        vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm)
      }
    }
    

    首先获取了const props = vm.$options.props实例的props属性。
    紧接着对 methods 定义的方法进行遍历,对每个方法进行了3层判断。

    1、必须的函数。
    2、不能和 props 重名。
    3、不能用下划线_和美元符号$开头。

    vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm)
    最后在 vm 对象上面定义了这些方法。

    相关文章

      网友评论

          本文标题:vue源码分析(九)核心函数之initMethods

          本文链接:https://www.haomeiwen.com/subject/geekyhtx.html