vue源码分析之模版解析的事件指令

小咪咪 2023-07-03 03:00 4阅读 0赞

#### 一、模版解析之事件指令的分析 ####

1.  **事件指令**：在`vue`中是比较常见的， 比如`v-on:click`等进行绑定点击事件。
2.  **模版解析之事件指令的实现过程**：

*  从指令名中取出事件名
 *  根据指令的值(表达式)从 `methods` 中得到对应的事件处理函数对象
 *  给当前元素节点绑定指定事件名和回调函数的 `dom`事件监听
 *  指令解析完后, 移除此指令属性

1.  **模版解析之事件指令的关键过程**：

compile: function (node) { 
        // 得到所有标签属性节点
        var nodeAttrs = node.attributes,
          me = this;
        // 遍历所有属性
        [].slice.call(nodeAttrs).forEach(function (attr) { 
          // 得到属性名: v-on:click
          var attrName = attr.name;
          // 判断是否是指令属性
          if (me.isDirective(attrName)) { 
            // 得到表达式(属性值): test
            var exp = attr.value;
            // 得到指令名: on:click
            var dir = attrName.substring(2);
            // 事件指令
            if (me.isEventDirective(dir)) { 
              // 解析事件指令
              compileUtil.eventHandler(node, me.$vm, exp, dir);
            // 普通指令
            } else { 
              // 解析普通指令
              compileUtil[dir] && compileUtil[dir](node, me.$vm, exp);
            }
    
            // 移除指令属性
            node.removeAttribute(attrName);
          }
        });
      },

1.  **对于实现解析指令的核心过程**：

// 真正用于解析指令的方法
      bind: function (node, vm, exp, dir) { 
        /*实现初始化显示*/
        // 根据指令名(text)得到对应的更新节点函数
        var updaterFn = updater[dir + 'Updater'];
        // 如果存在调用来更新节点
        updaterFn && updaterFn(node, this._getVMVal(vm, exp));
    
        // 创建表达式对应的watcher对象
        new Watcher(vm, exp, function (value, oldValue) { /*更新界面*/
          // 当对应的属性值发生了变化时, 自动调用, 更新对应的节点
          updaterFn && updaterFn(node, value, oldValue);
        });
      },

1.  **对于事件处理的核心过程**：

// 事件处理
      eventHandler: function (node, vm, exp, dir) { 
        // 得到事件名/类型: click
        var eventType = dir.split(':')[1],
          // 根据表达式得到事件处理函数(从methods中): test(){}
          fn = vm.$options.methods && vm.$options.methods[exp];
        // 如果都存在
        if (eventType && fn) { 
          // 绑定指定事件名和回调函数的DOM事件监听, 将回调函数中的this强制绑定为vm
          node.addEventListener(eventType, fn.bind(vm), false);
        }
      },

1.  对于值的改变，`get`方法可以进行计算得到属性值，`set`方法可以监听属性值的变化，当值发生变化以后更新其它的相关属性值，核心过程代码如下：

// 得到表达式对应的value
      _getVMVal: function (vm, exp) { 
        var val = vm._data;
        exp = exp.split('.');
        exp.forEach(function (k) { 
          val = val[k];
        });
        return val;
      },
    
      _setVMVal: function (vm, exp, value) { 
        var val = vm._data;
        exp = exp.split('.');
        exp.forEach(function (k, i) { 
          // 非最后一个key，更新val的值
          if (i < exp.length - 1) { 
            val = val[k];
          } else { 
            val[k] = value;
          }
        });
      }

#### 二、模版解析之事件指令的实现 ####

1.  **事件指令的实现**：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>模版解析之事件指令_MVVM</title>
    </head>
    <body>
        <div id="test">
            <p> {
       { name }}</p>
            <button v-on:click="test">测试</button>
        </div>
    </body>
    <script type="text/javascript" src="./js/mvvm/compile.js"></script>
    <script type="text/javascript" src="js/mvvm/mvvm.js"></script>
    <script type="text/javascript" src="./js/mvvm/observer.js"></script>
    <script type="text/javascript" src="./js/mvvm/watcher.js"></script>
    <script type="text/javascript"> new MVVM({ el: "#test", data: { name: "张三" }, method: { test() { alert("事件指令测试"); } } }) </script>
    </html>