揭开Vue中的计算属性computed和watch的神秘面纱

2023-09-19 04:51:19

从零开始的Vue世界-04：揭秘计算属性computed和watch

在本系列文章中，我们已经陆续探讨了Vue的基础知识、组件化开发以及事件处理等内容。今天，我们将深入探讨Vue中的计算属性computed和watch的原理，帮助您在构建Vue应用程序时更加游刃有余。

计算属性computed：高效响应式数据管理

计算属性computed是一个非常有用的工具，它允许您以声明式的方式定义属性，而无需使用常规的JavaScript函数。计算属性通过一个getter函数来返回一个值，该值由一个或多个依赖的属性计算而来。当这些依赖的属性发生变化时，计算属性的值也会自动更新。

举个例子，如果您有一个Vue组件，需要计算用户输入的总金额。您可以创建一个计算属性来完成这项任务：

<template>
  <input v-model="amount">
  <p>Total: {{ totalAmount }}</p>
</template>

<script>
export default {
  data() {
    return {
      amount: 0
    }
  },
  computed: {
    totalAmount() {
      return this.amount * 100;
    }
  }
}
</script>

在这个例子中，计算属性totalAmount依赖于amount属性。当amount属性发生变化时，totalAmount的值也会自动更新。这使得您能够在应用程序中使用totalAmount属性，而无需手动计算它的值。

watch：监视数据变化，及时做出响应

与计算属性computed类似，watch也是一个非常有用的工具，它允许您监视数据属性的变化，并在变化发生时执行特定的操作。watch通过一个回调函数来实现，该回调函数接收两个参数：变化后的值和变化前的值。

举个例子，如果您有一个Vue组件，需要在用户输入金额时显示一条提示信息。您可以使用watch来完成这项任务：

<template>
  <input v-model="amount">
</template>

<script>
export default {
  data() {
    return {
      amount: 0
    }
  },
  watch: {
    amount(newVal, oldVal) {
      if (newVal > 100) {
        this.$message.warning('金额不能超过100元');
      }
    }
  }
}
</script>