vue双向数据绑定

关注

转载最新推荐文章于 2026-05-18 22:28:47 发布 230 阅读 AI 写同款· GEO 优化 ›

Vue 2 中的双向数据绑定详解双向数据绑定意味着当用户交互改变视图中的值时，这些更改会自动反映到关联的数据模型中；同样地，如果通过代码修改了数据模型，相应的视图也会即时更新。这种机制极大地简化了前端开发工作流，使得开发者可以更加专注于业务逻辑的实现，而不必担心手动管理DOM操作。阅读详情

双向数据绑定基本原理

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

var obj  = {};
Object.defineProperty(obj, 'name', {
        get: function() {
            console.log('get触发了')
            return value1;
        },
        set: function (Value2) {
            console.log('set触发了')
        }
})
obj.name = 'fei';//在给obj设置name属性的时候，触发了set这个方法
var val = obj.name;//在得到obj的name属性，会触发get方法

已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，那么在设置或者获取的时候我们就可以在get或者set方法里假如其他的触发函数，达到监听数据变动的目的，无疑这个方法是最重要、最基础的内容之一。

html 下实现双向数据绑定：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1 class="demo"></h1>
  <input type="text" class="input">
</body>
<script>

  var obj = {};
  var demo = document.querySelector('.demo')
  var demo_input = document.querySelector('.input') 

  Object.defineProperty(obj, 'name', {
    //当该属性被获取时触发
    get: function () {
      console.log("get触发了")
      return value1;
    },
    //当该属性被赋值时触发
    set: function (Value2) {
      console.log("set触发了")
      demo_input.value = Value2;
      demo.innerHTML = Value2;
    }
  })
  demo_input.addEventListener('input', function (e) {
    // 给obj的name属性赋值，进而触发该属性的set方法
    obj.name = e.target.value;
  });
  obj.name = 'fei';//在给obj设置name属性的时候，触发了set这个方法
</script>
</html>

讲解vue如何实现

原理图:
在这里插入图片描述

observer用来实现对每个vue中的data中定义的属性循环用Object.defineProperty()实现数据劫持，以便利用其中的setter和getter，然后通知订阅者，订阅者会触发它的update方法，对视图进行更新。
我们介绍为什么要订阅者，在vue中v-model，v-name，{{}}等都可以对数据进行显示，也就是说假如一个属性都通过这三个指令了，那么每当这个属性改变的时候，相应的这个三个指令的html视图也必须改变，于是vue中就是每当有这样的可能用到双向绑定的指令，就在一个Dep中增加一个订阅者，其订阅者只是更新自己的指令对应的数据，也就是v-model='name’和{{name}}有两个对应的订阅者，各自管理自己的地方。每当属性的set方法触发，就循环更新Dep中的订阅者。

vue代码实现

observer实现，主要是给每个vue的属性用Object.defineProperty()，代码如下：

function defineReactive(obj, key, val) {
    var dep = new Dep();
    Object.defineProperty(obj, key, {
      get: function () {
        //添加订阅者watcher到主题对象Dep
        if (Dep.target) {
          // JS的浏览器单线程特性，保证这个全局变量在同一时间内，只会有同一个监听器使用
          dep.addSub(Dep.target);
        }
        return val;
      },
      set: function (newVal) {
        if (newVal === val) return;
        val = newVal;
        console.log(val);
        // 作为发布者发出通知
        dep.notify();//通知后dep会循环调用各自的update方法更新视图
      }
    })
  }
  function observe(obj, vm) {
    Object.keys(obj).forEach(function (key) {
      defineReactive(vm, key, obj[key]);
    })
  }

实现compile：

compile的目的就是解析各种指令称真正的html。

function Compile(node, vm) {
    if (node) {
      this.$frag = this.nodeToFragment(node, vm);
      return this.$frag;
    }
  }
  Compile.prototype = {
    nodeToFragment: function (node, vm) {
      var self = this;
      var frag = document.createDocumentFragment();
      var child;
      while (child = node.firstChild) {
        console.log([child])
        self.compileElement(child, vm);
        frag.append(child); // 将所有子节点添加到fragment中
      }
      return frag;
    },
    compileElement: function (node, vm) {
      var reg = /\{\{(.*)\}\}/;
      //节点类型为元素(input元素这里)
      if (node.nodeType === 1) {
        var attr = node.attributes;
        // 解析属性
        for (var i = 0; i < attr.length; i++) {
          if (attr[i].nodeName == 'v-model') {//遍历属性节点找到v-model的属性
            var name = attr[i].nodeValue; // 获取v-model绑定的属性名
            node.addEventListener('input', function (e) {
              // 给相应的data属性赋值，进而触发该属性的set方法
              vm[name] = e.target.value;
            });
            new Watcher(vm, node, name, 'value');//创建新的watcher，会触发函数向对应属性的dep数组中添加订阅者，
          }
        };
      }
      //节点类型为text
      if (node.nodeType === 3) {
        if (reg.test(node.nodeValue)) {
          var name = RegExp.$1; // 获取匹配到的字符串
          name = name.trim();
          new Watcher(vm, node, name, 'nodeValue');
        }
      }
    }
  }

watcher实现

function Watcher(vm, node, name, type) {
    Dep.target = this;
    this.name = name;
    this.node = node;
    this.vm = vm;
    this.type = type;
    this.update();
    Dep.target = null;
  }

  Watcher.prototype = {
    update: function () {
      this.get();
      this.node[this.type] = this.value; // 订阅者执行相应操作
    },
    // 获取data的属性值
    get: function () {
      console.log(1)
      this.value = this.vm[this.name]; //触发相应属性的get
    }
  }

实现Dep来为每个属性添加订阅者

function Dep() {
    this.subs = [];
  }
  Dep.prototype = {
    addSub: function (sub) {
      this.subs.push(sub);
    },
    notify: function () {
      this.subs.forEach(function (sub) {
        sub.update();
      })
    }
  }

总结

首先我们为每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep；然后在编译的时候在该属性的数组dep中添加订阅者，v-model会添加一个订阅者，{{}}也会，v-bind也会，只要用到该属性的指令理论上都会，接着为input会添加监听事件，修改值就会为该属性赋值，触发该属性的set方法，在set方法内通知订阅者数组dep，订阅者数组循环调用各订阅者的update方法更新视图。

收录于