Vue3如何使用watch和computed属性实现数据的变更监听和计算

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

## 什么是`watch`属性？

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

```javascriptimport { 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`属性会基于其依赖的数据进行缓存，只有当依赖的数据发生变化时，才会重新计算值，这在提升性能和减少不必要的计算方面有显著作用。
​​​​​​​

```javascriptimport { 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`属性，实现一个例子：一个简单的计数器应用，这个应用可以监听用户输入的数字变化，并计算其平方和平方根。
​​​​​​​

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