vue中computed和watch的使用场景

在Vue中，computed和watch均是用于处理数据的计算和响应的工具，它们的使用场景如下：

1. computed：

   • 当需要根据已有的数据来计算出新的数据时，可以使用computed。computed属性是一个函数，返回的是一个被计算的值。它会根据其中的依赖数据进行自动更新。
   • computed适用于对数据进行处理和筛选，例如将一组数据进行排序、筛选出满足特定条件的数据等。
   • 例子：计算购物车中总价、计算列表中满足特定条件的元素个数等。

2. watch：

   • 当需要对某个特定的数据进行监听，一旦该数据发生变化就需要执行相应的操作时，可以使用watch。watch属性是一个对象，可以监听一个或多个数据，并在数据变化时执行相应的操作。
   • watch适用于需要在数据变化时进行异步操作、请求数据、更新其他数据等情况。
   • 例子：监听输入框的变化，根据输入内容请求搜索结果、监听路由参数的变化，根据参数重新渲染页面等。

总结：computed适用于对数据的计算和处理，而watch适用于监听数据的变化并执行相应的操作。两者都能满足计算和响应的需求，但是在不同的场景下选择合适的工具可以使代码更加清晰和高效。

computed和watch是Vue中两种常用的数据观察和计算属性的方式。

computed属性是基于它的依赖进行缓存的。只有当依赖发生变化时，computed属性才会重新计算。所以它适合用来处理需要进行复杂计算的属性，并且计算结果会被多次使用的场景。 下面是一个computed属性的示例：

<template>
  <div>
    <p>原始数字: {{ number }}</p>
    <p>计算属性: {{ computedNumber }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 5
    };
  },
  computed: {
    computedNumber() {
      // 这里可以进行一些复杂的计算
      return this.number * 2;
    }
  }
};
</script>

watch属性用于观察某个数据的变化，并在数据变化时执行相应的操作。它适合处理异步操作或者需要在数据变化后执行一些副作用操作的场景。 下面是一个watch属性的示例：

<template>
  <div>
    <p>输入文字: <input v-model="text" /></p>
    <p>异步查询结果: {{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '',
      result: ''
    };
  },
  watch: {
    text: {
      immediate: true, // 初始化时也执行一次
      handler() {
        // 模拟异步查询
        setTimeout(() => {
          this.result = '查询结果：' + this.text;
        }, 500);
      }
    }
  }
};
</script>

在上面的例子中，当输入框中的文字发生变化时，watch属性会监听到这个变化，并执行异步查询操作，并更新结果。

原文地址：https://blog.csdn.net/m0_74801194/article/details/136206841

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！