揭开Vue.js中computed的运作机制：一探究竟，一窥究竟

前端

2024-01-04 00:35:44

computed属性：Vue.js中的数据派生利器

在Vue.js中，computed属性可谓数据派生的利器，它可以让我们基于现有的数据创建新的数据，并随着相关数据的变化而自动更新。这使得我们能够定义一些复杂的逻辑，而无需手动处理数据的更新和依赖关系。

computed是如何工作的？

要理解computed是如何工作的，我们首先需要了解两个关键概念：依赖和闭包。

1. 依赖

依赖是指computed属性所依赖的其他数据，当这些数据发生变化时，computed属性的值也会随之更新。Vue.js会自动跟踪computed属性的依赖关系，并当依赖数据发生变化时触发computed属性的重新计算。

2. 闭包

闭包是指一个函数及其所在的词法作用域，其中包含了该函数的所有局部变量。在computed属性中，计算属性的函数及其依赖的数据都存储在一个闭包中，当computed属性的依赖数据发生变化时，Vue.js会重新执行闭包中的函数，并使用新的数据计算computed属性的值。

通过一个示例理解computed的工作原理

为了更好地理解computed的工作原理，我们来实现一个简单的函数，它具有与Vue.js中computed属性相同的功能。

function computed(fn) {
  // 创建一个闭包，保存计算函数和依赖的数据
  const closure = {
    fn,
    dependencies: [],
  };

  // 创建一个属性访问器对象，它将被用作computed属性的getter和setter
  const propertyAccessor = {
    get() {
      // 当访问computed属性时，重新计算其值
      closure.value = closure.fn.apply(this, closure.dependencies);
      return closure.value;
    },
    set(newValue) {
      // 设置computed属性的值会触发重新计算
      closure.value = newValue;
      closure.fn.apply(this, closure.dependencies);
    },
  };

  // 返回属性访问器对象
  return propertyAccessor;
}

在这个函数中，我们首先创建了一个闭包，用来保存计算函数和依赖的数据。然后，我们创建了一个属性访问器对象，它将被用作computed属性的getter和setter。getter函数在访问computed属性时被调用，它将重新计算属性的值并返回。setter函数在设置computed属性的值时被调用，它将触发属性的重新计算。

使用computed函数实现一个简单的例子

现在，我们来看一个简单的例子，展示如何使用computed函数来定义一个computed属性。

const person = {
  name: 'John',
  age: 25,
  country: 'Brazil',
};

// 定义一个computed属性，计算person的年龄是否超过18岁
const isAdult = computed(function() {
  return this.age > 18;
});

// 访问computed属性
console.log(person.isAdult); // true