Vue.js 源码分析(十六) 指令篇 v-on指令详解

时间  2019-12-12
标签 vue.js vue 源码 分析 十六 指令 详解 栏目 JavaScript 繁體版
原文   原文链接

能够用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码，例如:html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="show('click',$event)" @mouseenter="show('mouseenter',$event)">测试</button>
    </div>
    <script>
        Vue.config.productionTip=false;
        Vue.config.devtools=false;
        var app = new Vue({
            el:'#app',
            methods:{ show(type,ev){console.log(type)} }
        })
    </script>
</body>
</html>

渲染结果为:vue

咱们给测试按钮添加了一个mouseenter和click事件，鼠标移上去式控制台输出:node

当点击时，输出为:数组

 Vue的事件绑定有不少种写法，例如:app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{message}}</p> 
        <button @click="test1">Test1</button>                   　　　　<!--事件能够对应一个方法-->
        <button @click="test2('test2',$event)">Test2</button>          <!--方法还能够传递参数，$event表示原始的DOM事件-->
        <button @click="message='test3'">Test3</button>             　 <!--也能够是一个表达式-->
        <button @click="function(){message='test4'}">Test4</button>    <!--也能够是一个函数-->
        <button @click="()=>{message='test5'}">Test5</button>          <!--也能够是一个箭头函数-->
    </div>  
    <script>
        var App = new Vue({
            el:'#app',
            data(){
                return {message:"Hello Vue"}
            },
            methods:{
                test1(){console.log('test1');},
                test2(text,ev){console.log(text);console.log(ev.type)}
            }
        })
    </script>
</body>
</html>

能够看到v-on对应事件能够不少种格式的，能够是当前Vue实例的一个方法、一个表达式、一个函数，或者一个箭头函数ide

 

 源码分析函数

 以上面的第一个例子为例,Vue将DOM解析成AST对象时的时候执行到a节点时会执行processElement()函数,而后会执行processAttrs()函数,该函数会遍历每一个属性，而后用判断是否以:或v-bind:开头,以下:源码分析

function processAttrs (el) {      //第9526行 对剩余的属性进行分析
  var list = el.attrsList;
  var i, l, name, rawName, value, modifiers, isProp;
  for (i = 0, l = list.length; i < l; i++) {    //遍历每一个属性
    name = rawName = list[i].name;                //获取属性名
    value = list[i].value;                        //该属性对应的值
    if (dirRE.test(name)) {                       //若是该属性以v-、@或:开头，表示这是Vue内部指令
      // mark element as dynamic
      el.hasBindings = true;
      // modifiers
      modifiers = parseModifiers(name);
      if (modifiers) {
        name = name.replace(modifierRE, '');
      }
      if (bindRE.test(name)) {                    //bindRD等于/^:|^v-bind:/ ，即该属性是v-bind指令时 例如:<a :href="url">你好</a>
        /*这里时v-bind指令对应的分支*/
      } else if (onRE.test(name)) {               //onRE等于/^@|^v-on:/，即该属性是v-on指令时
        name = name.replace(onRE, '');                              //获取绑定的事件类型  好比@click，此时name等于click   v-on:click此时name也等于click
        addHandler(el, name, value, modifiers, false, warn$2);      //调用addHandler()函数将事件相关信息保存到el.events或nativeEvents里面
      } else {                                  // normal directives
       /*自定义指令的分支*/
      }
    } else {                                      //存储普通属性的分支
      // literal attribute
      {
        var res = parseText(value, delimiters);
        if (res) {
          warn$2(
            name + "=\"" + value + "\": " +
            'Interpolation inside attributes has been removed. ' +
            'Use v-bind or the colon shorthand instead. For example, ' +
            'instead of <div id="{{ val }}">, use <div :id="val">.'
          );
        }
      }
      addAttr(el, name, JSON.stringify(value));
      // #6887 firefox doesn't update muted state if set via attribute
      // even immediately after element creation
      if (!el.component &&
          name === 'muted' &&
          platformMustUseProp(el.tag, el.attrsMap.type, name)) {
        addProp(el, name, 'true');
      }
    }
  }
}

addHandler()函数用于给对应的AST对象增长一个events属性，保存事件对应的信息，以下:性能

function addHandler (     //第6573行  给el这个AST对象增长event或nativeEvents，用于记录事件的信息 
  el,
  name,
  value,
  modifiers,
  important,
  warn
) {
  modifiers = modifiers || emptyObject;
  // warn prevent and passive modifier
  /* istanbul ignore if */
  if (
    "development" !== 'production' && warn &&
    modifiers.prevent && modifiers.passive
  ) {
    warn(
      'passive and prevent can\'t be used together. ' +
      'Passive handler can\'t prevent default event.'
    );
  }

  // check capture modifier
  if (modifiers.capture) {
    delete modifiers.capture;
    name = '!' + name; // mark the event as captured
  }
  if (modifiers.once) {             //若是有once修饰符
    delete modifiers.once;
    name = '~' + name; // mark the event as once
  }
  /* istanbul ignore if */
  if (modifiers.passive) {
    delete modifiers.passive;
    name = '&' + name; // mark the event as passive
  }

  // 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 (name === 'click') {         //鼠标按键修饰符:若是是click事件，则根据modiflers进行修正
    if (modifiers.right) {
      name = 'contextmenu';
      delete modifiers.right;
    } else if (modifiers.middle) {
      name = 'mouseup';
    }
  }

  var events;
  if (modifiers.native) {       //若是存在native修饰符，则保存到el.nativeEvents里面，对于组件的自定义事件执行到这里
    delete modifiers.native;
    events = el.nativeEvents || (el.nativeEvents = {});
  } else {                      //不然保存到el.events里面
    events = el.events || (el.events = {});
  }

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

  var handlers = events[name];          //尝试获取已经存在的该事件对象
  /* istanbul ignore if */
  if (Array.isArray(handlers)) {        //若是是数组，表示已经插入了两次了，则再把newHandler添加进去
    important ? handlers.unshift(newHandler) : handlers.push(newHandler);
  } else if (handlers) {                 //若是handlers存在且不是数组，则表示只插入过一次，则把events[name]变为数组
    events[name] = important ? [newHandler, handlers] : [handlers, newHandler];
  } else {
    events[name] = newHandler;           //不然表示是第一次新增该事件，则值为对应的newHandler
  }

  el.plain = false;
}

例子里执行到这里这里后对应的AST等于:测试

接下来在generate生成rendre函数的时候会调用genHandlers函数根据不一样修饰符等生成对应的属性(做为_c函数的第二个data参数一部分)，

 

function genHandlers (    //第9992行 拼凑事件的data函数
  events, 
  isNative,
  warn
) {
  var res = isNative ? 'nativeOn:{' : 'on:{';     //若是参数isNative为true则设置res为:nativeOn:{，不然为:on:{  ;对于组件来讲isNative为true,原生事件来讲是on
  for (var name in events) {                      //遍历events，拼凑结果
    res += "\"" + name + "\":" + (genHandler(name, events[name])) + ",";
  }
  return res.slice(0, -1) + '}'
}

genHandler会获取每一个事件对应的代码，以下:

function genHandler (   //第10004行  name:事件名，好比:name handler:事件绑定的对象信息，好比:{value: "show", modifiers: {…}}
  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);          //是否为简单的表达式，好比show、show_d、show1等
  var isFunctionExpression = fnExpRE.test(handler.value);       //是否为函数表达式(箭头函数或function(){}格式的匿名函数)

  if (!handler.modifiers) {                                     //若是该事件的修饰符为空
    if (isMethodPath || isFunctionExpression) {                     //若是是简单表达式或者是函数表达式
      return handler.value                                              //则直接返回handler.value,好比:show
    }
    /* istanbul ignore if */
    return ("function($event){" + (handler.value) + "}") // inline statement  //不然返回带有一个$event变量的函数形式，好比:当value是个表达式时，例如:value=a+123，返回格式:function($event){a+123;}
  } else {                                                      //若是还存在修饰符(解析模板时有些修饰符被过滤掉了)
    var code = '';
    var genModifierCode = '';
    var keys = [];
    for (var key in handler.modifiers) {                          //遍历每一个修饰符，好比:prevent
      if (modifierCode[key]) {                                        //若是有在modifierCode里面定义   modifierCode是个数组，保存了一些内置修饰符对应的代码
        genModifierCode += modifierCode[key];                            //则拼凑到genModifierCode里面
        // left/right
        if (keyCodes[key]) {
          keys.push(key);
        }
      } else if (key === 'exact') {
        var modifiers = (handler.modifiers);
        genModifierCode += genGuard(
          ['ctrl', 'shift', 'alt', 'meta']
            .filter(function (keyModifier) { return !modifiers[keyModifier]; })
            .map(function (keyModifier) { return ("$event." + keyModifier + "Key"); })
            .join('||')
        );
      } 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
      ? ("return " + (handler.value) + "($event)")
      : isFunctionExpression
        ? ("return (" + (handler.value) + ")($event)")
        : handler.value;
    /* istanbul ignore if */
    return ("function($event){" + code + handlerCode + "}")
  }
}

例子里执行到这里后生成的render函数等于:

with(this){return _c('div',{attrs:{"id":"app"}},[_c('button',{on:{"click":function($event){show('click',$event)},"mouseenter":function($event){show('mouseenter',$event)}}},[_v("测试")])])}

其中和事件有关的以下:

on: {
    "click": function($event) {
        show('click', $event)
    },
    "mouseenter": function($event) {
        show('mouseenter', $event)
    }
}

最后在_watch渲染成真实的DOM节点后，就会调用events模块的updateDOMListeners钩子函数，该函数会获取该Vnode的on属性，依次遍历on对象里的每一个元素，最后调用addEventListener去绑定对应的事件

 

function updateDOMListeners (oldVnode, vnode) {     //第7083行 DOMN事件相关
  if (isUndef(oldVnode.data.on) && isUndef(vnode.data.on)) {
    return
  }
  var on = vnode.data.on || {};                                   //新Node上的事件  例如:{click: ƒ ($event){}}
  var oldOn = oldVnode.data.on || {};
  target$1 = vnode.elm;                                           //DOM引用
  normalizeEvents(on);                                            //处理V-model的
  updateListeners(on, oldOn, add$1, remove$2, vnode.context);     //调用updateListeners作进一步处理
  target$1 = undefined;
}

updateListeners()函数又会调用add$1函数去添加DOM事件，以下:

function updateListeners (      //第2036行 更新DOM事件
  on,
  oldOn,
  add,
  remove$$1,
  vm
) {
  var name, def, cur, old, event;
  for (name in on) {                  //遍历on,此时name就是对应的事件类型，好比:click
    def = cur = on[name];
    old = oldOn[name];
    event = normalizeEvent(name);
    /* istanbul ignore if */
    if (isUndef(cur)) {
      "development" !== 'production' && warn(
        "Invalid handler for event \"" + (event.name) + "\": got " + String(cur),
        vm
      );
    } else if (isUndef(old)) {                //若是old没有定义，则表示这是一个建立事件
      if (isUndef(cur.fns)) {
        cur = on[name] = createFnInvoker(cur);
      }
      add(event.name, cur, event.once, event.capture, event.passive, event.params);   //调用add()绑定事件
    } else if (cur !== old) {
      old.fns = cur;
      on[name] = old;
    }
  }
  for (name in oldOn) {
    if (isUndef(on[name])) {
      event = normalizeEvent(name);
      remove$$1(event.name, oldOn[name], event.capture);
    }
  }
}

updateListeners里的add函数，也就是全局的add$1函数才是最终的添加事件函数，以下:

function add$1 (    //第7052行  绑定事件  event:事件名 handler:事件的函数 once$$1:是否只执行一次 capture:是否采用捕获状态 passive:可用于移动端性能提高
  event,
  handler,
  once$$1,
  capture,
  passive
) {
  handler = withMacroTask(handler);
  if (once$$1) { handler = createOnceHandler(handler, event, capture); }  //若是有设置了once$$1，则继续使用createOnceHandler封装
  target$1.addEventListener(                                              //调用原生的DOM APIaddEventListener添加对应的事件,2017年DOM规范对addEventListener()的第三个参数作了修订，能够是一个对象
    event,
    handler,
    supportsPassive
      ? { capture: capture, passive: passive }
      : capture
  );
}

咱们看到Vue内部添加DOM事件最终也是经过addEventListener()来添加的，说到底，Vue只是把这些API进行了封装，使咱们用起来更方便而已。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程