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

最新推荐文章于 2022-12-05 09:04:43 发布

城南花开ze

最新推荐文章于 2022-12-05 09:04:43 发布

阅读量228

点赞数

分类专栏： Vue 文章标签： vue源码分析模版解析事件指令

本文链接：https://blog.csdn.net/weixin_42614080/article/details/104132098

版权

Vue 专栏收录该内容

128 篇文章 21 订阅

订阅专栏

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

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

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

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

 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);
      }
    });
  },

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

// 真正用于解析指令的方法
  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);
    });
  },

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

  // 事件处理
  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);
    }
  },

对于值的改变，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;
      }
    });
  }

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

事件指令的实现：

<!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>

城南花开ze

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue源码分析之模版解析的事件指令

一、模版解析之事件指令的分析事件指令：在vue中是比较常见的，比如v-on:click等进行绑定点击事件。模版解析之事件指令的实现过程：从指令名中取出事件名根据指令的值(表达式)从 methods 中得到对应的事件处理函数对象给当前元素节点绑定指定事件名和回调函数的 dom事件监听指令解析完后, 移除此指令属性模版解析之事件指令的关键过程： compile: func...
复制链接

扫一扫