剖析Vue响应式原理，揭秘数据流转奥秘

前端

2023-09-04 06:17:39

导言

在Vue.js中，响应式系统是其核心功能之一。它允许我们轻松地实现数据绑定，从而创建交互式和动态的Web应用程序。本文将深入浅出地探讨Vue响应式原理，揭开数据流转的奥秘，帮助开发者全面掌握Vue响应式系统的核心机制。

数据劫持与监听属性变化

Vue响应式系统的基础是数据劫持。当Vue实例被初始化时，它将递归地遍历数据对象，使用ES6 Proxy或Object.defineProperty等特性对每个属性进行劫持。

当一个被劫持的属性发生变化时，Vue会触发一个"setter"函数，该函数通知观察者（Dep）中注册的Watcher。

Watcher：数据变化的监听者

Watcher是Vue响应式系统的关键组成部分。它们负责监听数据的变化，并在变化发生时执行更新视图的操作。

每个Watcher都会被分配一个更新函数，当它被触发时，将重新渲染受影响的组件。

Dep：数据依赖关系管理

Dep（依赖关系）用于管理Watcher与数据之间的依赖关系。每个属性都有一个相关的Dep。当一个属性发生变化时，其Dep会通知所有注册在其上的Watcher。

通过这种机制，Vue可以有效地追踪数据变化，并仅更新受影响的组件，优化性能。

响应式对象创建

要创建响应式对象，可以使用Vue.reactive()或Vue.ref()函数。这些函数将创建一个被劫持的对象，允许对其属性进行响应式跟踪。

自定义响应式对象

除了内置的响应式函数，Vue还允许开发者创建自定义响应式对象。这可以通过使用Class的getter和setter，或利用Vuex的Vuex.observable()等工具来实现。

深入示例：实现Vue响应式原理

为了更好地理解Vue响应式原理，我们创建一个简单的示例，模拟Vue响应式系统的基本实现。

示例代码：

class Vue {
  constructor(data) {
    this.data = data;
    this.observer(data);
  }

  observer(data) {
    Object.keys(data).forEach((key) => {
      this.defineReactive(data, key, data[key]);
    });
  }

  defineReactive(data, key, val) {
    const dep = new Dep();
    Object.defineProperty(data, key, {
      get() {
        dep.addSub(Dep.target);
        return val;
      },
      set(newVal) {
        val = newVal;
        dep.notify();
      },
    });
  }
}

class Dep {
  constructor() {
    this.subs = [];
  }

  addSub(sub) {
    this.subs.push(sub);
  }

  notify() {
    this.subs.forEach((sub) => sub.update());
  }
}

class Watcher {
  constructor(vm, exp, cb) {
    this.vm = vm;
    this.exp = exp;
    this.cb = cb;
    this.value = this.get();
  }

  get() {
    Dep.target = this;
    const val = this.vm.data[this.exp];
    Dep.target = null;
    return val;
  }

  update() {
    const newVal = this.get();
    this.cb(newVal, this.value);
  }
}

const vm = new Vue({
  data: {
    name: 'John',
  },
});

vm.data.name = 'Jane';