vue3 computed 和 watch 的差异

news2024/10/1 15:20:55

前言

用法

computed

watch

代码

理解

高质量的使用

Vue.js作为一种现代化的前端框架，提供了丰富的特性来帮助开发者构建高效和响应式的用户界面。在这其中，computed 和 watch 是两个非常重要的选项，它们都用于处理数据的变化，但它们的用法、原理以及适用的场景都有很大的差异。接下来，我们将详细介绍这两者的区别，以及如何在Vue中高效地使用它们。

前言

在Vue应用中，数据的响应式变化是其核心特性之一。computed 和 watch 都提供了一种机制来观察和响应Vue实例上数据的变化。然而，它们的使用方式、原理以及适用的场景都有明显的差异。computed 通常用于计算派生状态，而 watch 更适用于观察数据的变化并执行异步操作或较大的计算。理解它们之间的区别，可以帮助我们更合理地设计我们的应用，使其更加高效和易于维护。

用法

computed

computed 是基于它们的依赖进行缓存的。只有在相关依赖发生改变时它们才会重新求值。这意味着只要依赖保持不变，多次访问 computed 属性将立即返回之前的计算结果，而不必再次执行函数。

computed 的常见用法是在模板内进行复杂计算：

new Vue({
  data: {
    a: 1,
    b: 2
  },
  computed: {
    sum: function () {
      return this.a + this.b;
    }
  }
});

在上面的例子中，sum 是一个计算属性，依赖于 data 对象中的 a 和 b。只要 a 或 b 改变，sum 就会自动更新。

watch

watch 提供了一种方式，允许我们执行异步操作 (访问一个API，限制执行频率)，并在我们观察的数据发生变化时，执行更多的操作。

new Vue({
  data: {
    question: '',
    answer: 'Questions usually contain a question mark. ;)'
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  },
  methods: {
    getAnswer: _.debounce(
      function () {
        if (this.question.indexOf('?') === -1) {
          this.answer = 'Questions usually contain a question mark. ;)'
          return
        }
        this.answer = 'Thinking...'
        // 略
      },
      // 这是我们为用户停止输入等待的毫秒数
      500
    )
  }
})

在这个例子中，我们使用 watch 选项来观察 question 数据的变化，并执行一些异步操作或者较大计算。

代码

下面是一个具体的例子，展示了 computed 和 watch 的用法：

<template>
  <div>
    <input v-model="number">
    <p>原始数字：{{ number }}</p>
    <p>数字的平方（computed）：{{ squaredNumber }}</p>
    <button @click="findSquareRoot">计算数字的平方根（watch）</button>
    <p>数字的平方根（watch）：{{ squareRoot }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 0,
      squareRoot: 0
    };
  },
  computed: {
    squaredNumber() {
      return this.number * this.number;
    }
  },
  watch: {
    number(newValue) {
      this.findSquareRoot();
    }
  },
  methods: {
    findSquareRoot() {
      this.squareRoot = Math.sqrt(this.number);
    }
  }
}
</script>

在这个例子中，我们有一个文本输入框，用户可以输入数字。我们使用 computed 属性来计算这个数字的平方，并使用 watch 来计算这个数字的平方根。

理解

computed 和 watch 的核心区别在于它们如何跟踪依赖和触发更新。

computed 更适合用在模板中需要进行复杂计算的场景，它会缓存计算结果，只有当其依赖发生变化时才会重新计算。这使得 computed 非常高效。
watch 则更适用于观察某个值的变化并执行异步操作或开销较大的操作。它不会缓存结果，每次触发都会执行指定的回调函数。

高质量的使用

为了确保我们高效地使用 computed 和 watch，我们需要遵循一些最佳实践：

合理选择：根据具体场景合理选择使用 computed 还是 watch。如果你需要基于某个状态的派生状态，使用 computed；如果你需要在某个状态变化时执行异步或开销较大的操作，使用 watch。
避免复杂的 computed 属性：虽然 computed 属性是缓存的，但是不代表你可以在 computed 属性中执行非常复杂的操作。过于复杂的 computed 属性会使得组件的可维护性变差。
合理利用 watch 的配置项：watch 提供了一些配置项，比如 deep 和 immediate。deep 允许你在观察对象时深度观察其内部的变化，而 immediate 允许你在添加观察者时立即触发回调。