【揭秘Vue.js数据绑定的奥秘】双向数据流原理深度解析

媒介

Vue.js 作为一款风行的前端JavaScript框架，其核心特点之一就是双向数据绑定。双向数据绑定使得数据模型（Model）与用户界面（View）之间可能实现主动同步，极大年夜处所便了开辟者。本文将深刻剖析Vue.js双向数据绑定的道理，帮助读者更好地懂得其背后的机制。

双向数据绑定概述

双向数据绑定意味着当数据模型产生变更时，视图也会主动更新；反之，当视图中的用户输入产生变更时，数据也会主动同步更新。这种机制简化了用户界面与数据模型之间的交互，进步了开辟效力。

双向数据绑定的实现道理

Vue.js 的双向数据绑定重要依附于以下多少个关键点：

1. 数据劫持（数据呼应式）

Vue.js 经由过程利用 Object.defineProperty 方法，将东西的属性转化为 getter 跟 setter 函数。当拜访属性时，会触发 getter 函数，而当修改属性值时，会触发 setter 函数。

function defineReactive(obj, key, val) {
  const dep = new Dep();
  let value = val;
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      if (Dep.target) {
        dep.addSub(Dep.target);
      }
      return value;
    },
    set: function reactiveSetter(newVal) {
      if (newVal !== value) {
        value = newVal;
        dep.notify();
      }
    }
  });
}

class Dep {
  constructor() {
    this.subs = [];
  }
  addSub(sub) {
    this.subs.push(sub);
  }
  notify() {
    this.subs.forEach(sub => sub.update());
  }
}

2. 察看者形式

察看者形式是一种计划形式，它容许东西在状况变更时告诉其他依附东西。Vue.js 中的察看者形式用于实现数据变更时告诉视图更新。

class Watcher {
  constructor(vm, key, callback) {
    this.vm = vm;
    this.key = key;
    this.callback = callback;
    Dep.target = this;
    this.vm[this.key];
    Dep.target = null;
  }
  update() {
    this.callback.call(this.vm, this.vm[this.key]);
  }
}

3. 指令剖析器（Complie）

指令剖析器担任剖析 DOM 中的指令，并将指令与数据绑定。Vue.js 利用了 Complie 类来实现指令剖析。

class Complie {
  constructor(el, vm) {
    this.vm = vm;
    this.el = el;
    this.fragment = document.createDocumentFragment();
    this.init();
  }
  init() {
    const childNodes = this.el.childNodes;
    for (let i = 0; i < childNodes.length; i++) {
      const node = childNodes[i];
      if (node.nodeType === 3) {
        // 文本节点
        this.complieText(node);
      } else if (node.nodeType === 1) {
        // 元素节点
        this.complieNode(node);
      }
    }
    this.el.appendChild(this.fragment);
  }
  complieText(node) {
    // 省略文本节点指令剖析逻辑
  }
  complieNode(node) {
    // 省略元素节点指令剖析逻辑
  }
}

4. v-model 指令

v-model 指令是 Vue.js 中实现双向绑定的核心指令。它经由过程监听表单位素的变更并将其同步到数据模型，同时当数据模型变更时，主动更新表单位素的值。

Vue.directive('model', {
  bind(el, binding) {
    el.addEventListener('input', function (e) {
      binding.value(e.target.value);
    });
  },
  update(el, binding) {
    el.value = binding.value;
  }
});

总结

Vue.js 的双向数据绑定机制基于数据劫持、察看者形式、指令剖析器跟 v-model 指令。这种机制使得数据模型与用户界面之间可能实现主动同步，极大年夜处所便了开辟者。经由过程深刻懂得双向数据绑定的道理，我们可能更好地利用 Vue.js 的特点，进步开辟效力。