数组的响应式魔法

2023-11-11 04:04:48

揭秘 Vue.js 中响应式数组的奥秘

在 Vue.js 中，数组可谓是响应式变化的幕后英雄。它们能自动侦测到元素的添加、删除或修改，并触发相应的更新。但这种响应性是如何实现的呢？让我们踏上探索 Vue.js 数组响应式机制的旅程。

源码探秘

在 Vue.js 的核心库中，观察者模式（Observer）扮演着关键角色。Observer 类负责监听数据对象的属性变化，并将这些变化传播给依赖于它们的组件。当我们使用 Vue.observable(array) 使数组变为响应式时，本质上就是实例化了一个 Observer 对象。

// src/core/observer/index.js
export function observable(value) {
  if (value && value.__ob__) {
    return value.__ob__;
  }
  return new Observer(value);
}

依赖收集

当数组被观察时，依赖收集机制就开始发挥作用。依赖收集器会遍历数组中的每一项，为每一项创建对应的 Dep 实例，用以收集依赖于该项的组件。当数组发生变化时，Dep 实例会通知其收集到的组件，触发重新渲染。

变异方法

为了方便操作数组，Vue.js 提供了 push、pop 等变异方法。这些方法不仅能修改数组，还能触发响应式更新。秘密在于这些方法被重写了，重写后的方法内部会调用 Observer 的 set 方法，手动触发响应式更新。

// src/core/observer/array.js
export const arrayMethods = Object.create(Array.prototype);
arrayMethods.push = function push() {
  // ... 省略其他代码
  Observer.set(this, length, inserted); // 触发响应式更新
};

实例演示

为了直观地理解数组响应式的运作原理，我们不妨编写一个简单的 Vue 组件：

import Vue from 'vue';

const app = new Vue({
  data() {
    return {
      items: ['foo', 'bar', 'baz']
    };
  },
  methods: {
    addItem() {
      this.items.push('qux');
    }
  }
});