vue如何实现的数据双向绑定

Vue.js 实现数据双向绑定的核心在于其通过数据劫持和发布-订阅模式来实现 1、数据变化驱动视图更新 和 2、视图变化反过来驱动数据更新。具体来说，Vue.js 利用 Object.defineProperty() 方法来劫持数据的 getter 和 setter，并在数据变化时通知订阅者（视图组件）更新，同时在视图发生变化时，将变化反映到数据模型中。下面将详细描述 Vue.js 实现数据双向绑定的过程。

一、数据劫持

Vue.js 通过 Object.defineProperty() 来劫持每一个属性的 getter 和 setter，从而实现对数据变化的监听。

具体步骤：

遍历数据对象，对每一个属性进行劫持。
定义 getter 和 setter，在 getter 中收集依赖，在 setter 中通知依赖更新。

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      // 收集依赖
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        val = newVal;
        // 通知依赖更新
      }
    }
  });
}

二、依赖收集

Vue.js 使用一个 Dep 类来管理依赖关系。每个响应式属性都有一个 Dep 实例，当属性被读取时，Dep 会收集依赖，当属性被修改时，Dep 会通知这些依赖进行更新。

具体步骤：

定义 Dep 类，用于管理依赖的收集和通知。
在 getter 中调用 Dep 的 depend 方法，收集依赖。
在 setter 中调用 Dep 的 notify 方法，通知依赖更新。

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

三、发布-订阅模式

Vue.js 利用发布-订阅模式实现视图和数据的双向绑定。Watcher 类作为订阅者，当数据变化时，它会执行相应的更新操作。

具体步骤：

定义 Watcher 类，用于创建视图依赖。
在 Watcher 类中创建一个 update 方法，用于执行视图更新操作。
在 Watcher 实例化时，将其添加到 Dep 的订阅者列表中。

class Watcher {
  constructor(vm, exp, cb) {
    this.vm = vm;
    this.exp = exp;
    this.cb = cb;
    this.value = this.get();
  }
  get() {
    Dep.target = this;
    let value = this.vm[this.exp];
    Dep.target = null;
    return value;
  }
  update() {
    let value = this.vm[this.exp];
    let oldValue = this.value;
    if (value !== oldValue) {
      this.value = value;
      this.cb.call(this.vm, value, oldValue);
    }
  }
  addDep(dep) {
    dep.addSub(this);
  }
}

四、模板编译

Vue.js 需要将模板中的指令和表达式解析成响应式依赖。编译过程主要包括解析模板、生成渲染函数以及绑定数据和视图。

具体步骤：

解析模板，生成抽象语法树（AST）。
将 AST 转换成渲染函数。
在渲染函数中绑定数据和视图，实现数据变化驱动视图更新。

function compile(el, vm) {
  let fragment = document.createDocumentFragment();
  while (el.firstChild) {
    fragment.appendChild(el.firstChild);
  }
  replace(fragment);
  el.appendChild(fragment);
  function replace(frag) {
    Array.from(frag.childNodes).forEach(node => {
      let text = node.textContent;
      let reg = /\{\{(.*)\}\}/;
      if (node.nodeType === 3 && reg.test(text)) {
        let exp = reg.exec(text)[1];
        let watcher = new Watcher(vm, exp, function(newVal) {
          node.textContent = newVal;
        });
        node.textContent = watcher.value;
      }
      if (node.childNodes) {
        replace(node);
      }
    });
  }
}

五、实现双向绑定

Vue.js 通过 v-model 指令实现表单元素的双向绑定。v-model 指令会将表单元素的值绑定到数据模型，同时监听表单元素的 input 事件，当用户输入时更新数据模型。

具体步骤：

解析 v-model 指令，绑定表单元素的值到数据模型。
监听表单元素的 input 事件，在用户输入时更新数据模型。

function model(node, vm, exp) {
  node.value = vm[exp];
  new Watcher(vm, exp, function(value) {
    node.value = value;
  });
  node.addEventListener('input', function(e) {
    vm[exp] = e.target.value;
  });
}

六、示例说明

以下是一个完整的示例，展示了 Vue.js 如何实现数据双向绑定：

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>
<script>
  class Vue {
    constructor(options) {
      this.data = options.data;
      this.methods = options.methods;
      this.proxyData(this.data);
      observe(this.data);
      compile(document.getElementById(options.el), this);
    }
    proxyData(data) {
      Object.keys(data).forEach(key => {
        Object.defineProperty(this, key, {
          get() {
            return data[key];
          },
          set(newVal) {
            data[key] = newVal;
          }
        });
      });
    }
  }
  function observe(data) {
    if (!data || typeof data !== 'object') return;
    Object.keys(data).forEach(key => {
      defineReactive(data, key, data[key]);
    });
  }
  function defineReactive(obj, key, val) {
    let dep = new Dep();
    observe(val);
    Object.defineProperty(obj, key, {
      get() {
        dep.depend();
        return val;
      },
      set(newVal) {
        if (newVal !== val) {
          val = newVal;
          observe(newVal);
          dep.notify();
        }
      }
    });
  }
  class Dep {
    constructor() {
      this.subs = [];
    }
    addSub(sub) {
      this.subs.push(sub);
    }
    depend() {
      if (Dep.target) {
        Dep.target.addDep(this);
      }
    }
    notify() {
      this.subs.forEach(sub => sub.update());
    }
  }
  Dep.target = null;
  class Watcher {
    constructor(vm, exp, cb) {
      this.vm = vm;
      this.exp = exp;
      this.cb = cb;
      this.value = this.get();
    }
    get() {
      Dep.target = this;
      let value = this.vm[this.exp];
      Dep.target = null;
      return value;
    }
    update() {
      let value = this.vm[this.exp];
      let oldValue = this.value;
      if (value !== oldValue) {
        this.value = value;
        this.cb.call(this.vm, value, oldValue);
      }
    }
    addDep(dep) {
      dep.addSub(this);
    }
  }
  function compile(el, vm) {
    let fragment = document.createDocumentFragment();
    while (el.firstChild) {
      fragment.appendChild(el.firstChild);
    }
    replace(fragment);
    el.appendChild(fragment);
    function replace(frag) {
      Array.from(frag.childNodes).forEach(node => {
        let text = node.textContent;
        let reg = /\{\{(.*)\}\}/;
        if (node.nodeType === 3 && reg.test(text)) {
          let exp = reg.exec(text)[1];
          let watcher = new Watcher(vm, exp, function(newVal) {
            node.textContent = newVal;
          });
          node.textContent = watcher.value;
        }
        if (node.childNodes) {
          replace(node);
        }
      });
    }
  }
  function model(node, vm, exp) {
    node.value = vm[exp];
    new Watcher(vm, exp, function(value) {
      node.value = value;
    });
    node.addEventListener('input', function(e) {
      vm[exp] = e.target.value;
    });
  }
  new Vue({
    el: 'app',
    data: {
      message: 'Hello, Vue!'
    }
  });
</script>

总结

通过以上步骤，Vue.js 实现了数据双向绑定，确保数据变化能够自动更新视图，视图变化也能够反过来更新数据。要点包括：

数据劫持：通过 Object.defineProperty() 劫持数据的 getter 和 setter。
依赖收集：利用 Dep 类管理依赖关系。
发布-订阅模式：通过 Watcher 类实现视图依赖的订阅和更新。
模板编译：解析模板并绑定数据和视图。
双向绑定：通过 v-model 指令实现表单元素的双向绑定。

进一步建议：在实际开发中，熟悉 Vue.js 的这些底层实现原理有助于更好地理解和使用 Vue.js 提供的高级功能，同时也能更好地调试和优化应用的性能。

vue如何实现的数据双向绑定

一、数据劫持

二、依赖收集

三、发布-订阅模式

四、模板编译

五、实现双向绑定

六、示例说明

总结

相关问答FAQs：

发表回复