Vue中computed计算属性和watch侦听属性的区别和运用场景

在Vue中，computed计算属性和watch侦听属性是两个非常常用的功能，它们可以帮助我们更灵活地处理数据变化，以及实时更新视图。虽然它们都可用于监听数据变化，但它们在实际应用中有着不同的使用场景和用法。本文将详细介绍computed计算属性和watch侦听属性的区别以及它们各自的运用场景。

首先，让我们先来了解computed计算属性。在Vue中，computed是一种基于依赖缓存的属性，其值会根据依赖的数据变化而自动重新计算。一般来说，computed适用于那些依赖其他数据计算得到的值，且该值具有缓存特性，多次访问时只会重新计算一次。这种特性可以有效地减少不必要的计算，提高性能。

一个常见的应用场景是对数据进行过滤或排序。例如，在一个商品列表页面中，我们希望展示价格大于100元的商品数量。我们可以使用computed来计算这个数量。首先，我们需要有一个data中的商品列表数组：

```javascript
data() {
  return {
    productList: [
      { name: '商品A', price: 99 },
      { name: '商品B', price: 120 },
      { name: '商品C', price: 80 },
      { name: '商品D', price: 150 },
    ]
  };
}
```

然后，我们在computed中定义一个名为`expensiveProductCount`的计算属性，该属性返回价格大于100元的商品数量：

```javascript
computed: {
  expensiveProductCount() {
    return this.productList.filter(item => item.price > 100).length;
  }
}
```

这样，在模板中，我们可以直接引用`expensiveProductCount`这个计算属性，来展示价格大于100元的商品数量：

```html

价格大于100元的商品数量：{{ expensiveProductCount }}

```

每当商品列表的价格发生变化时，计算属性会自动重新计算，保证我们始终得到最新的结果。

接下来，让我们详细了解watch侦听属性。与computed不同，watch是一种"观察"数据变化的方式，当数据发生变化时，执行一些副作用的操作。它适用于那些需要在数据变化时执行异步或开销较大的操作。常见的应用场景包括触发网络请求、执行复杂的计算、操作DOM等。

假设我们有一个需求：当商品列表发生变化时，需要向后端发送统计数据的请求。我们可以使用watch来实现这个功能。首先，我们需要在data中定义一个名为`productList`的变量，用于存储商品列表：

```javascript
data() {
  return {
    productList: []
  };
}
```

然后，在watch中监听`productList`的变化，并在变化时触发一个异步请求：

```javascript
watch: {
  productList(newList, oldList) {
    this.sendStatisticsRequest();
  }
},
methods: {
  sendStatisticsRequest() {
    // 发送统计数据的请求...
  }
}
```

在上面的代码中，我们通过监听`productList`来检测商品列表的变化，当商品列表发生变化时，会调用`sendStatisticsRequest`方法来发送统计数据的请求。

watch还可以监听多个属性的变化，并执行不同的操作。例如，我们还可以监听`productList`和`selectedCategory`的变化，并在变化时执行不同的操作：

```javascript
watch: {
  productList(newList, oldList) {
    this.sendStatisticsRequest();
  },
  selectedCategory(newCategory, oldCategory) {
    this.filterProductList();
  }
},
methods: {
  sendStatisticsRequest() {
    // 发送统计数据的请求...
  },
  filterProductList() {
    // 过滤商品列表...
  }
}
```

通过以上示例，我们可以看到，在Vue中，computed计算属性和watch侦听属性分别适用于不同的场景。computed适用于那些依赖其他数据计算得到的值，且具有缓存特性；而watch适用于那些需要在数据变化时执行副作用操作的场景。同时，它们也可以配合使用，以满足更复杂的需求。

在实际开发中，我们需要根据具体情况选择合适的方式来处理数据变化。通过灵活运用computed计算属性和watch侦听属性，我们可以更好地组织代码，实现更好的用户体验。

更多面试题请点击 web前端高频面试题_在线视频教程-CSDN程序员研修院

最后问候亲爱的朋友们，并邀请你们品读我的全新著作。