vue源码解析之双向数据绑定的原理

一、双向数据绑定的原理分析

双向数据绑定：建立在单向数据绑定的基础之上的，也就是在 model-->View的基础之上的。
双向数据绑定的实现过程：

在解析 v-model指令时, 给当前元素添加 input 监听
当 input的 value 发生改变时, 将最新的值赋值给当前表达式所对应的 data属性

实现双向数据绑定，核心过程如下：

   // 解析: v-model
  model: function (node, vm, exp) {
    // 实现数据的初始化显示和创建对应的watcher
    this.bind(node, vm, exp, 'model');

    var me = this,
      // 得到表达式的值
      val = this._getVMVal(vm, exp);
      // 给节点绑定input事件监听，输入改变的时寒
    node.addEventListener('input', function (e) {
      // 得到输入的最新值
      var newValue = e.target.value;
      // 如果没有变化，直接结束
      if (val === newValue) {
        return;
      }
      // 将最新的value保存给表达式所对应的属性
      me._setVMVal(vm, exp, newValue);
      val = newValue;
    });
  },

_setVal()的核心实现：

_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>双向数据绑定</title>
</head>
<body>
    
    <div id="test">
        <input type="text" v-model="msg" />
        <p>{{ msg }}</p>
    </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: {
            msg: "hahaha"
        }
    })

</script>
</html>

旧城tk

发布了146 篇原创文章 · 获赞 34 · 访问量 3万+

私信关注

vue源码解析之双向数据绑定的原理

一、双向数据绑定的原理分析

二、双向数据绑定的实现：

猜你喜欢