Vue 3 中使用 watch 和 computed 属性实现数据的变更监听与计算

在现代前端开发中，数据的变更监听和计算是十分关键的功能，而 Vue 3 为开发者提供了非常简便且强大的工具——watch 和 computed 属性。通过这些工具，我们可以轻松实现实时数据更新和动态数据计算。接下来，我将带大家深入了解，并通过示例代码详解如何在 Vue 3 中充分利用 watch 和 computed 属性。

什么是 watch 属性？

watch 属性顾名思义，就是观察者。在 Vue 3 中，watch 用于监听一个或多个响应式数据的改变，并在数据变化时执行相应的回调函数。

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 监听 count 的变化
    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });

    return { count };
  }
};

在上面的例子中，我们定义了一个响应式数据 count，并通过 watch 来监听其变化。当 count 的值发生变化时，回调函数会被触发，并打印出 count 的旧值和新值。

什么是 computed 属性？

computed 属性用于声明计算属性。与 watch 不同，computed 属性更加关注依赖的数据变化后所得到的新值。其优点在于，computed 属性会基于其依赖的数据进行缓存，只有当依赖的数据发生变化时，才会重新计算值，这在提升性能和减少不必要的计算方面有显著作用。

import { computed, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 定义一个计算属性
    const doubleCount = computed(() => count.value * 2);

    return { count, doubleCount };
  }
};

在这个示例中，我们定义了一个响应式数据 count，然后通过 computed 定义了一个计算属性 doubleCount，其值为 count 的两倍。当 count 发生变化时，doubleCount 会自动更新，并且只有在 count 变动时 doubleCount 才会进行重新计算。

实现数据的变更监听和计算

下面我们将整合 watch 和 computed 属性，实现一个例子：一个简单的计数器应用，该应用可以监听用户输入的数字变化，并计算其平方和平方根。

<template>
  <div>
    <input v-model="count" type="number" placeholder="Enter a number"/>
    <p>Count: {{ count }}</p>
    <p>Square: {{ square }}</p>
    <p>Square Root: {{ squareRoot }}</p>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    
    // 使用 computed 属性计算平方和平方根
    const square = computed(() => count.value * count.value);
    const squareRoot = computed(() => Math.sqrt(count.value));

    // 监听 count 变化，并提供反馈
    const message = ref('');
    watch(count, (newValue) => {
      if(newValue % 2 === 0) {
        message.value = 'The number is even';
      } else {
        message.value = 'The number is odd';
      }
    });

    return { count, square, squareRoot, message };
  }
};
</script>

<style scoped>
input {
  margin-bottom: 10px;
}
</style>

代码解析

1. 输入框和数据绑定：用户输入一个数字，该数字绑定到 count 数据。
2. 计算属性：
   • square 属性计算输入数字的平方。
   • squareRoot 属性计算输入数字的平方根。
3. 观察者属性：
   • 通过 watch 观察 count 的值，当 count 为偶数时，显示消息 “The number is even”；否则显示 “The number is odd”。

运行结果

当用户在输入框中输入数字后，页面会实时显示该数字的平方和平方根，并且根据数字的奇偶性显示相应的消息提示。

总结

通过上述示例，我们可以看出，Vue 3 中的 watch 和 computed 属性各有用途且可以协同工作。computed 属性适用于基于现有数据进行派生计算，而 watch 属性则适用于需要对数据变更进行特定操作的场景。通过合理使用这两个属性，能够大大简化代码逻辑，提升代码的可读性和维护性。