Vue3 中 watch 与 computed 的使用方法

在 Vue3 的开发过程中，watch 与 computed 是两个非常实用且强大的功能，它们极大地提升了数据处理与响应式编程的效率。理解并掌握这两者的使用方法，对于构建高效、可维护的 Vue 应用至关重要。

computed 计算属性，从名字上就能看出，它主要用于处理那些依赖于其他数据计算得出的结果。例如，在一个电商购物车应用中，我们可能需要根据每个商品的价格和数量来计算总价。这时就可以使用 computed。计算属性具有缓存机制，只有当它所依赖的数据发生变化时，才会重新计算。比如，在购物车中，如果商品的数量和价格都没有改变，那么无论多少次访问总价这个计算属性，它都不会重新计算，而是直接返回之前缓存的结果，这大大提高了性能。

下面看一个简单的代码示例：

<template>
  <div>
    <p>总价: {{ totalPrice }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([
  { price: 10, quantity: 2 },
  { price: 20, quantity: 3 }
]);

const totalPrice = computed(() => {
  let sum = 0;
  items.value.forEach(item => {
    sum += item.price * item.quantity;
  });
  return sum;
});
</script>

watch 监听器，则侧重于观察数据的变化，并在数据变化时执行相应的操作。比如，当用户在输入框中输入内容时，我们可能希望实时对输入内容进行验证或触发一些其他逻辑。watch 可以精确地监听一个响应式数据的变化。它可以监听一个简单的 ref，也可以监听一个复杂的对象或数组。

示例代码如下：

<template>
  <div>
    <input v-model="searchText" placeholder="请输入搜索内容">
  </div>
</template>

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

const searchText = ref('');

watch(searchText, (newValue, oldValue) => {
  console.log('搜索内容变化了，旧值:', oldValue, '新值:', newValue);
  // 这里可以添加搜索逻辑
});
</script>

在实际开发中，我们要根据具体的业务场景合理选择使用 computed 还是 watch。computed 适用于需要根据已有数据计算新值的场景，而 watch 更侧重于对数据变化做出反应并执行特定操作。熟练运用这两个特性，能让我们在 Vue3 开发中更加得心应手，编写出高质量的代码。