VUE-単純Clickイベントプロシージャ

VUEのクリックイベントはすべて使用したことがありますが、最も簡単なclickの下位層がどのように実現されているかを見てみましょう.

click1

vueが初期化されるとmethodのメソッドをvue[key]にエージェントしながらイベントのコールバック関数を修飾する.役割ドメインがバインドされています.

function initState (vm) {
  vm._watchers = [];
  var opts = vm.$options;
  if (opts.props) { initProps(vm, opts.props); }
  if (opts.methods) { initMethods(vm, opts.methods); }//1.     
  if (opts.data) {
    initData(vm);
  } else {
    observe(vm._data = {}, true /* asRootData */);
  }
  if (opts.computed) { initComputed(vm, opts.computed); }
  if (opts.watch) { initWatch(vm, opts.watch); }
}

もう一度initMethodsメソッドを見てみましょう

function initMethods (vm, methods) {
  var props = vm.$options.props;
  for (var key in methods) {
    vm[key] = methods[key] == null ? noop : bind(methods[key], vm);
    {
      if (methods[key] == null) {
        warn(
          "method \"" + key + "\" has an undefined value 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
        );
      }
    }
  }
}

bindメソッドが戻り関数によってイベントのコールバック関数を修飾しているのを見てみましょう.イベントコールバック関数をバインドしたthis.パラメータをカスタマイズ

function bind (fn, ctx) {
  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
}

VUEがコンパイルを実行すると、divなどの元の要素がastになり、関数genHandlerによって処理されます.イベント関数に修飾子がある場合、修飾子を処理し、修飾子に対応する関数文を追加します.

function genHandler (
  name,
  handler
) {
  if (!handler) {
    return 'function(){}'
  }

  if (Array.isArray(handler)) {
    return ("[" + (handler.map(function (handler) { return genHandler(name, handler); }).join(',')) + "]")
  }

  var isMethodPath = simplePathRE.test(handler.value);
  var isFunctionExpression = fnExpRE.test(handler.value);
  if (!handler.modifiers) {
  //            
    return isMethodPath || isFunctionExpression
      ? handler.value
      : ("function($event){" + (handler.value) + "}") // inline statement
  } else {
//     
    var code = '';
    var genModifierCode = '';
    var keys = [];
    for (var key in handler.modifiers) {
      if (modifierCode[key]) {
//       
        genModifierCode += modifierCode[key];
        if (keyCodes[key]) {
          keys.push(key);
        }
      } else {
        keys.push(key);
      }
    }
    if (keys.length) {
      code += genKeyFilter(keys);
    }
    // Make sure modifiers like prevent and stop get executed after key filtering
    if (genModifierCode) {
      code += genModifierCode;
    }
    var handlerCode = isMethodPath
      ? handler.value + '($event)'
      : isFunctionExpression
        ? ("(" + (handler.value) + ")($event)")
        : handler.value;
    return ("function($event){" + code + handlerCode + "}")
  }
}

render関数divのコードを見てみましょう

_c('div',{attrs:{"id":"test1"},on:{"click":click1}},[_v("click1")]),_v(" ")

ブラウザが最終domにレンダリングされると、コア関数が呼び出されます.

function add$1 (
  event,
  handler,
  once$$1,
  capture,
  passive
) {
  if (once$$1) {
    var oldHandler = handler;
    var _target = target$1; // save current target element in closure
    handler = function (ev) {
      var res = arguments.length === 1
        ? oldHandler(ev)
        : oldHandler.apply(null, arguments);
      if (res !== null) {
        remove$2(event, handler, capture, _target);
      }
    };
  }
  target$1.addEventListener(
    event,
    handler,
    supportsPassive
      ? { capture: capture, passive: passive }//        
      : capture
  );
}

まとめ:div要素が追加されました.native修飾子のイベント.最終的にはaddEventListener()マウントイベント
知行事務、専門移動事務プラットフォームhttps://zx.naton.cn/【総監】十二春秋之、[email protected]; 【Master】zelo,[email protected]; 【運営】狼行天下、[email protected]; 【製品デザイン】放浪猫、[email protected]; 【体験デザイン】ポケット、[email protected]; 【iOS】コードを研ぐ作業員、[email protected];iMcG33K,[email protected]; 【Android】人猿居士、[email protected];考えの悟り、[email protected]; 【java】チーフエンジニアMR_W,[email protected]; 【テスト】土鏡が尋ねた[email protected]; 【データ】喜楽多、[email protected]; 【安全】秘密にして、あなたは知っています.