Vue3进阶：玩转计算属性、watch和综合案例

2023-01-13 22:49:36

计算属性和 watch：Vue 3 中的强力助手

在 Vue 3 中，计算属性和 watch 是两个至关重要的特性，它们赋能开发者构建响应式应用。让我们深入探讨它们的用法，以提升你的 Vue 开发技能。

计算属性：让数据响应

想象一下，你希望根据两个属性 firstName 和 lastName 动态计算全名。传统方法需要你手动计算，但计算属性提供了优雅的解决方案。

只需创建一个名为 fullName 的计算属性，它返回 firstName 和 lastName 的拼接值：

<template>
  <p>你的全名是：{{ fullName }}</p>
</template>

<script>
export default {
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}
</script>

现在，当 firstName 或 lastName 发生变化时，fullName 会自动更新，而无需你手动触发。

watch：监控数据变化

watch 让你能够监测数据的变化并执行特定操作。例如，你希望在 firstName 或 lastName 更新时在控制台中输出一条消息：

<template>
  <p>你的全名是：{{ fullName }}</p>
</template>

<script>
export default {
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  watch: {
    firstName(newValue, oldValue) {
      console.log(`名字从 ${oldValue} 更改为 ${newValue}`);
    },
    lastName(newValue, oldValue) {
      console.log(`姓氏从 ${oldValue} 更改为 ${newValue}`);
    }
  }
}
</script>

当这些值发生变化时，你会在控制台中看到相应的日志。

综合示例：计算属性和 watch 的协作

让我们将这两个特性结合起来，构建一个完整的示例。假设我们有一个包含三个输入框的表单：firstName、lastName 和 address。我们希望自动更新 fullName 和 fullAddress，同时在值更新时打印日志。

<template>
  <form>
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <input type="text" v-model="address">

    <p>你的全名是：{{ fullName }}</p>
    <p>你的详细地址是：{{ fullAddress }}</p>
  </form>
</template>

<script>
export default {
  data() {
    return {
      firstName: '',
      lastName: '',
      address: ''
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    },
    fullAddress() {
      return this.address + ', ' + this.city + ', ' + this.state + ', ' + this.zip;
    }
  },
  watch: {
    firstName(newValue, oldValue) {
      console.log(`名字从 ${oldValue} 更改为 ${newValue}`);
    },
    lastName(newValue, oldValue) {
      console.log(`姓氏从 ${oldValue} 更改为 ${newValue}`);
    },
    address(newValue, oldValue) {
      console.log(`地址从 ${oldValue} 更改为 ${newValue}`);
    }
  }
}
</script>