Vue 中 computed 和 watch 的用法和区别？

在 Vue 中，computed 和 watch 都是用于监听数据变化的功能，但它们的用法和作用有所不同。

Computed 属性：

• 用法： 在 Vue 组件中使用 computed 属性定义计算属性。

• 特点： 计算属性是基于它们的依赖进行缓存的，只有在依赖发生变化时才会重新计算。

• 适用场景： 适合处理基于已有的响应式数据计算而来的属性，如对数据的加工、筛选、排序等操作。

<template>
  <div>
    <p>{{ message }}</p>
    <input v-model="inputValue">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: 'Hello',
    };
  },
  computed: {
    message() {
      return this.inputValue.toUpperCase();
    },
  },
};
</script>

Watch 属性：

• 用法： 在 Vue 组件中使用 watch 属性监听数据的变化。

• 特点： Watch 侦听特定的数据变化，并在数据变化时执行回调函数。

• 适用场景： 适合观察某个特定数据的变化，并执行一些异步或复杂操作。

<template>
  <div>
    <p>{{ message }}</p>
    <input v-model="inputValue">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: 'Hello',
      message: '',
    };
  },
  watch: {
    inputValue(newVal, oldVal) {
      this.message = newVal.toUpperCase();
    },
  },
};
</script>

区别：

1. 缓存与否： computed 属性是基于它们的依赖进行缓存的，只有依赖发生变化时才会重新计算；而 watch 监听特定数据的变化，在每次数据变化时都会执行回调。

2. 使用场景： computed 适合处理需要基于已有响应式数据计算而来的属性；watch 适合观察和响应特定数据的变化，执行一些逻辑操作。

在选择使用时，根据需要计算的属性是否基于响应式数据以及需要执行的逻辑操作来决定使用 computed 还是 watch。通常情况下，优先使用 computed，只有在需要监听特定数据变化并执行一些复杂操作时才使用 watch。