Vue3如何使用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属性则适用于需要对数据变更进行特定操作的场景。通过合理使用这两个属性，能够大大简化我们的代码逻辑，提升代码的可读性和维护性。

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作