深入理解 Vue3 中的 Computed 与 Watch

2024-02-06 23:16:00

Vue3 学习日志 2——深入理解 Computed 与 Watch

大家好，欢迎来到我的 Vue3 学习之旅的第二篇日志。在这一篇中，我们将深入探讨两个重要的概念：Computed 和 Watch。

** computed **

Computed 属性是一个惰性计算 属性，它会在其依赖项发生改变时自动重新计算其值。这意味着只有当用于计算 Computed 属性的属性发生改变时，Computed 属性才会重新计算。这可以大大提高性能，因为它避免了不必要的重新渲染。

语法

computed: {
  computedProperty() {
    // 计算属性的计算逻辑
  }
}

示例

以下是一个示例，它演示了如何使用 Computed 属性计算一个对象的长度：

const object = {
  name: 'John Doe',
  age: 30
};

const app = new Vue({
  computed: {
    objectLength() {
      return Object.keys(this.object).length;
    }
  },
  data() {
    return {
      object
    };
  }
});

console.log(app.objectLength); // 输出：2

** watch **

Watch 顾名思义，它是一个观察者。它允许我们在一个属性发生改变时执行某些操作。与 Computed 不同，Watch 是一个主动侦听器，它会在其被观察的属性发生改变时立即触发。

语法

watch: {
  watchedProperty(newValue, oldValue) {
    // 属性发生改变时要执行的操作
  }
}

示例

以下是一个示例，它演示了如何在属性 count 发生改变时打印一条消息：

const app = new Vue({
  watch: {
    count(newValue) {
      console.log(`属性 count 的新值为 ${newValue}`);
    }
  },
  data() {
    return {
      count: 0
    };
  }
});

app.count++; // 输出：属性 count 的新值为 1