Vue3修炼攻略：计算属性与监视属性揭秘

2023-04-08 15:23:24

计算属性和监视属性：Vue3中的数据管理利器

计算属性：动态计算

想象一下你的应用需要显示总价，而总价是由多个输入框中的商品数量和单价计算出来的。使用计算属性，你可以轻松完成这项任务。

<template>
  <input type="number" v-model="quantity">
  <input type="number" v-model="price">
  <p>Total: {{ total }}</p>
</template>

<script>
export default {
  computed: {
    total() {
      return this.quantity * this.price;
    }
  },
  data() {
    return {
      quantity: 0,
      price: 0
    };
  }
};
</script>

当输入框的值发生变化时，total 计算属性会自动重新计算并显示新的总价。

监视属性：响应数据变化

如果我们需要在用户输入特定数据时触发一个操作，比如在输入有效邮箱地址时发送请求，我们就可以使用监视属性。

<template>
  <input type="email" v-model="email">
</template>

<script>
export default {
  watch: {
    email(newValue, oldValue) {
      if (this.isEmailValid(newValue)) {
        this.sendRequest();
      }
    }
  },
  methods: {
    isEmailValid(email) {
      // 邮箱验证逻辑
    },
    sendRequest() {
      // 发送请求的逻辑
    }
  }
};
</script>

当用户输入邮箱地址并触发email 属性发生变化时，监视属性中的回调函数就会执行，检查邮箱地址的有效性，并在有效时发送请求。

对比与选择

计算属性和监视属性都是管理Vue3数据的有力工具，但在使用场景和行为方面存在差异：

特征	计算属性	监视属性
作用	计算新值	响应数据变化
触发时机	数据发生变化	数据发生变化
回调	只有 getter	可选 getter 和 setter
使用场景	将属性组合成新值、复杂计算、数据过滤/排序、格式化	在变化时触发操作、监视对象/数组、监视组件属性、监视路由参数
优点	提高性能、可读性、简洁性	响应性、灵活性、维护性