Vue 中的事件处理机制详解

一：vue中如何绑定事件？
vue事件分为两类，一个是原生dom事件，一个是组件自定义事件，绑定方法类似:

#绑定原生dom事件
<div id="example-1">
  <button v-on:click="handle">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

#绑定自定义事件,通过组件内部 $emit('myEvent')触发
<my-component v-on:myEvent="doSomething"></my-component>

#在自定义组件上绑定原生事件
<my-component v-on:click.native="doSomething"></my-component>

#绑定动态事件,eventName为实例中能够访问到的变量
<my-component v-on[eventName]="doSomething"></my-component>
<my-component @[eventName]="doSomething"></my-component>

二：vue中的事件修饰符
dom原生事件往往我们需要的不只是绑定，我们还需要处理冒泡，捕获，取消默认事件等特殊场景。

1. vue提供了非常便捷的事件修饰符来方便我们很简单的实现这些功能。

• .stop （取消冒泡）
• .prevent （取消默认事件）
• .capture （捕获阶段执行）
• .self （只有event.target 就是当前元素才执行）
• .once （只执行一次，执行完就销毁）
• .passive （滚动事件允许默认行为和scroll不阻塞执行）

2. vue 还提供了按键修饰符来实现更多复杂的交互

• .enter （回车触发）
• .tab （tab键盘触发）
• .delete (捕获“删除”和“退格”键)
• .esc （esc键触发）
• .space （空格键触发）
• .up （向上的键触发）
• .down（向上的键触发）
• .left（向左的键触发）
• .right（向右键触发）
• .ctrl（ctrl键触发）
• .alt（alt键触发）
• .shift（shift键触发）
• .meta（window键触发）
• .left（鼠标左键触发）
• .right（鼠标右键触发）
• .middle（鼠标中键触发）

3. 使用方法

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

具体大家可以自己去一一尝试，其中有一些按键是有系统兼容问题，大家参考文档注意处理。

三：核心源码解读
1.v-on 指令或者@on 实现

• vue通过解析template里的html提取出dom上的所有属性

// 正则匹配 html字符串里的   a="xx" @a="xx" @click='xxx' v-on:click="xx" 等属性定义字符串  
 var attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/; 
 // 正则匹配 动态的属性写法  @[x]="handle1"    v-on[x]=""  :[x]="" 
 var dynamicArgAttribute = /^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/;
  
function parseStartTag () {
      var start = html.match(startTagOpen);
      if (start) {
        var match = {
          tagName: start[1],
          attrs: [],
          start: index
        };
        advance(start[0].length);
        var end, attr;
        // 开始匹配，匹配后的属性压入到attrs里
        while (!(end = html.match(startTagClose)) && (attr = html.match(dynamicArgAttribute) || html.match(attribute))) { 
          attr.start = index;
          advance(attr[0].length);
          attr.end = index;
          match.attrs.push(attr);
        }
        if (end) {
          match.unarySlash = end[1];
          advance(end[0].length);
          match.end = index;
          return match
        }
      }
    }

• 通过正则匹配出对应的事件名和对应的事件执行方法

// 从属性中匹配和事件相关的属性
 var onRE = /^@|^v-on:/;
 // 匹配事件修饰符
 function parseModifiers (name) {
    var match = name.match(modifierRE);
    if (match) {
      var ret = {};
      match.forEach(function (m) { ret[m.slice(1)] = true; });
      return ret
    }
  }
 //省略N行代码
 if (onRE.test(name)) { // 匹配v-on或者@开头的属性
    name = name.replace(onRE, '');
     isDynamic = dynamicArgRE.test(name);
     if (isDynamic) {
       name = name.slice(1, -1);
     }
     addHandler(el, name, value, modifiers, false, warn$2, list[i], isDynamic);
   }
   
// 生成渲染函数字符串
function addHandler (
    el,
    name,
    value,
    modifiers,
    important,
    warn,
    range,
    dynamic
  ) {
    modifiers = modifiers || emptyObject;//事件修饰符
    // warn prevent and passive modifier
    /* istanbul ignore if */
    if (
      warn &&
      modifiers.prevent && modifiers.passive // prevent 和passive 不能一起使用，两个是互斥的
    ) {
      warn(
        'passive and prevent can\'t be used together. ' +
        'Passive handler can\'t prevent default event.',
        range
      );
    }

    // normalize click.right and click.middle since they don't actually fire
    // this is technically browser-specific, but at least for now browsers are
    // the only target envs that have right/middle clicks.
    if (modifiers.right) {
      if (dynamic) {
        name = "(" + name + ")==='click'?'contextmenu':(" + name + ")";
      } else if (name === 'click') {
        name = 'contextmenu';
        delete modifiers.right;
      }
    } else if (modifiers.middle) {
      if (dynamic) {
        name = "(" + name + ")==='click'?'mouseup':(" + name + ")";
      } else if (name === 'click') {
        name = 'mouseup';
      }
    }

    // check capture modifier
    if (modifiers.capture) { // 处理捕获
      delete modifiers.capture;
      name = prependModifierMarker('!', name, dynamic);
    }
    if (modifiers.once) { // 处理只执行一次
      delete modifiers.once;
      name = prependModifierMarker('~', name, dynamic);
    }
    /* istanbul ignore if */
    if (modifiers.passive) { // 处理passive
      delete modifiers.passive;
      name = prependModifierMarker('&', name, dynamic);
    }

    var events;
    if (modifiers.native) { // 处理原生事件
      delete modifiers.native;
      events = el.nativeEvents || (el.nativeEvents = {});
    } else {
      events = el.events || (el.events = {});
    }

    var newHandler = rangeSetItem({ value: value.trim(), dynamic: dynamic }, range);
    if (modifiers !== emptyObject) {
      newHandler.modifiers = modifiers;
    }

    var handlers = events[name];
    /* istanbul ignore if */
    if (Array.isArray(handlers)) {
      important ? handlers.unshift(newHandler) : handlers.push(newHandler);
    } else if (handlers) {
      events[name] = important ? [newHandler, handlers] : [handlers, newHandler];
    } else {
      events[name] = newHandler;
    }

    el.plain = false;
  }
  

最终结果是el的events里维护了事件和事件对应的内容方法以及修饰符，以及是否是动态事件名等信息。

• 通过gen方法生成事件虚拟渲染函数

function genData$2 (el, state) {
    var data = '{';

   // 省略N行代码
    // event handlers
    if (el.events) {
      data += (genHandlers(el.events, false)) + ",";
    }
    if (el.nativeEvents) {
      data += (genHandlers(el.nativeEvents, true)) + ",";
    }
    // v-on data wrap
    if (el.wrapListeners) {
      data = el.wrapListeners(data);
    }
    return data
  }

效果如下

• 事件作为属性注入到虚拟dom 里

function createCompileToFunctionFn (compile) {
    var cache = Object.create(null);

    return function compileToFunctions (
      template,
      options,
      vm
    ) {
      options = extend({}, options);
    // 省略N行
      // check cache
      var key = options.delimiters
        ? String(options.delimiters) + template
        : template;
      if (cache[key]) {
        return cache[key]
      }

   // 省略N行
      // turn code into functions
      var res = {};
      var fnGenErrors = [];
      res.render = createFunction(compiled.render, fnGenErrors);
      res.staticRenderFns = compiled.staticRenderFns.map(function (code) {
        return createFunction(code, fnGenErrors)
      });
// 省略N行代码
		// 转化后的渲染函数会缓存起来避免重复生成，生成的函数模版内容见下一个截图
      return (cache[key] = res) 
    }
  }
  // 将代码字符串转化为函数
function createFunction (code, errors) {
    try {
      return new Function(code)
    } catch (err) {
      errors.push({ err: err, code: code });
      return noop
    }
  }

这里可以看到通过compile生成的虚拟树和render函数字符串。这是vue的核心之一。

• 虚拟dom转化到实际dom，并调用原生addEventListener绑定事件

# 进入挂载方法
Vue.prototype.$mount = function (
    el,
    hydrating
  ) {
    el = el && query(el);

    /* istanbul ignore if */
    if (el === document.body || el === document.documentElement) {
      warn(
        "Do not mount Vue to <html> or <body> - mount to normal elements instead."
      );
      return this
    }

    var options = this.$options;
    // resolve template/el and convert to render function
    if (!options.render) {
      var template = options.template;
      if (template) {
        if (typeof template === 'string') {
          if (template.charAt(0) === '#') {
            template = idToTemplate(template);
            /* istanbul ignore if */
            if (!template) {
              warn(
                ("Template element not found or is empty: " + (options.template)),
                this
              );
            }
          }
        } else if (template.nodeType) {
          template = template.innerHTML;
        } else {
          {
            warn('invalid template option:' + template, this);
          }
          return this
        }
      } else if (el) {
        template = getOuterHTML(el);
      }
      if (template) {
        /* istanbul ignore if */
        if (config.performance && mark) {
          mark('compile');
        }

        var ref = compileToFunctions(template, {
          outputSourceRange: "development" !== 'production',
          shouldDecodeNewlines: shouldDecodeNewlines,
          shouldDecodeNewlinesForHref: shouldDecodeNewlinesForHref,
          delimiters: options.delimiters,
          comments: options.comments
        }, this);
        var render = ref.render;
        var staticRenderFns = ref.staticRenderFns;
        options.render = render;
        options.staticRenderFns = staticRenderFns;

        /* istanbul ignore if */
        if (config.performance && mark) {
          mark('compile end');
          measure(("vue " + (this._name) + " compile"), 'compile', 'compile end');
        }
      }
    }
    return mount.call(this, el, hydrating)
  };
  // 实际挂载方法
 function mountComponent (
    vm,
    el,
    hydrating
  ) {
    vm.$el = el;
   //  省略N行
    } else {
      updateComponent = function () {
      // 执行模版更新，调用_render方法创建vnode，调用_update更新dom
        vm._update(vm._render(), hydrating); 
      };
    }

    // we set this to vm._watcher inside the watcher's constructor
    // since the watcher's initial patch may call $forceUpdate (e.g. inside child
    // component's mounted hook), which relies on vm._watcher being already defined
     // 创建watcher 来执行updateComponent,会初次执行一次
    new Watcher(vm, updateComponent, noop, { 
      before: function before () {
        if (vm._isMounted && !vm._isDestroyed) {
          callHook(vm, 'beforeUpdate');
        }
      }
    }, true /* isRenderWatcher */); // 
    hydrating = false;

    // manually mounted instance, call mounted on self
    // mounted is called for render-created child components in its inserted hook
    if (vm.$vnode == null) {
      vm._isMounted = true;
      callHook(vm, 'mounted');
    }
    return vm
  }
// 事件绑定函数
function add$1 (
    name,
    handler,
    capture,
    passive
  ) {
    // async edge case #6566: inner click event triggers patch, event handler
    // attached to outer element during patch, and triggered again. This
    // happens because browsers fire microtask ticks between event propagation.
    // the solution is simple: we save the timestamp when a handler is attached,
    // and the handler would only fire if the event passed to it was fired
    // AFTER it was attached.
    if (useMicrotaskFix) {
      var attachedTimestamp = currentFlushTimestamp;
      var original = handler;
      handler = original._wrapper = function (e) {
        if (
          // no bubbling, should always fire.
          // this is just a safety net in case event.timeStamp is unreliable in
          // certain weird environments...
          e.target === e.currentTarget ||
          // event is fired after handler attachment
          e.timeStamp >= attachedTimestamp ||
          // bail for environments that have buggy event.timeStamp implementations
          // #9462 iOS 9 bug: event.timeStamp is 0 after history.pushState
          // #9681 QtWebEngine event.timeStamp is negative value
          e.timeStamp <= 0 ||
          // #9448 bail if event is fired in another document in a multi-page
          // electron/nw.js app, since event.timeStamp will be using a different
          // starting reference
          e.target.ownerDocument !== document
        ) {
          return original.apply(this, arguments)
        }
      };
    }
    target$1.addEventListener(// 最终在这里绑定
      name,
      handler,
      supportsPassive
        ? { capture: capture, passive: passive }
        : capture
    );
  }

四：vue如何优化事件？

vue在处理大列表绑定事件的时候，是有一定的性能问题的，框架内部没有把事件提到父节点上来做事件委托，唯一优化的是列表之间绑定的事件指向的函数都是同一个引用，且在dom销毁的时候能主动销毁事件，所以能负载一定的数据量，如果业务里的确存在非常大量的数据，建议还是自己在父节点上进行事件绑定，或者改变交互，进行分页。