computed和watch的区别；computed和methods的区别

---

在 Vue.js 中，computed、watch 和 methods 是三种不同的属性，用于处理数据和响应数据变化的方式。以下是它们的主要区别：

computed

1. 缓存： computed 属性是基于它的依赖进行缓存的。只有在依赖发生变化时，computed 才会重新计算。这有助于提高性能，因为不会在每次访问 computed 属性时都重新计算。
2. Getter 函数： computed 使用 getter 函数来定义，该函数返回计算的值。这使得在模板中可以像访问普通属性一样访问 computed 属性。
3. 适用场景： 适用于基于响应式数据进行复杂计算的场景，比如对多个响应式数据进行过滤、排序等操作。

<template>
  <div>{{ computedProperty }}</div>
</template>

<script>
export default {
  data() {
    return {
      dataA: 10,
      dataB: 20,
    };
  },
  computed: {
    computedProperty() {
      return this.dataA + this.dataB;
    },
  },
};
</script>

watch

1. 监听数据： watch 用于监听指定的数据，并在数据变化时执行特定的操作。可以监听多个数据，也可以深度监听对象。
2. 更灵活的操作： watch 提供了更灵活的方式来处理数据变化，可以执行异步操作，也可以在数据变化时执行特定的逻辑。
3. 适用场景： 适用于需要在数据变化时执行一些异步或复杂操作的场景。

<template>
  <div>{{ watchedData }}</div>
</template>

<script>
export default {
  data() {
    return {
      dataToWatch: 10,
      watchedData: null,
    };
  },
  watch: {
    dataToWatch(newValue, oldValue) {
      // 在数据变化时执行特定操作
      this.watchedData = newValue * 2;
    },
  },
};
</script>

methods

1. 方法： methods 中定义的是普通的方法，可以在模板中调用，也可以在其他生命周期钩子中调用。
2. 不缓存： 和 computed 不同，methods 中的方法在每次调用时都会执行，不进行缓存。
3. 适用场景： 适用于需要进行方法调用、事件处理等场景。

<template>
  <div @click="handleClick">{{ methodData }}</div>
</template>

<script>
export default {
  data() {
    return {
      methodData: 10,
    };
  },
  methods: {
    handleClick() {
      // 在点击时执行特定操作
      this.methodData += 5;
    },
  },
};
</script>

总的来说：

• 使用 computed 用于计算派生数据。
• 使用 watch 用于对数据的变化做出反应，并执行一些特定操作。
• 使用 methods 用于定义方法，处理事件和其他操作。

根据具体的需求和场景，选择合适的方式来处理数据和逻辑。

---

原文链接：codingdict.net

---