计算属性和侦听器：为什么在某些情况下使用计算属性比使用methods更好，如何使用侦听器来监听数据的变化。

计算属性和methods的区别和使用场景

计算属性（Computed properties）是 Vue 中非常重要的一个功能，它有以下的优点：

 

1. 数据缓存：计算属性基于它们的依赖进行缓存。只有在相关依赖发生变化时，才会重新求值。这意味着只要依赖项保持不变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。

2. 代码组织性：计算属性使得我们的视图层逻辑更简洁，并从视图层中抽离出一个可测试的部分。

3. 自动更新：较之于 methods 还有一个重要优点就是当它的依赖属性更新时，运算属性会自动更新。这是一个非常方便的特性。

4. 易读性与易维护性：如果一个值是由一个或多个 Vue 实例数据的运算得到的，我们就可以使用计算属性，从而简化模板中的复杂运算过程，提高代码的可读性与可维护性。

Methods，也就是我们在Vue中使用的方法，同样具有很多的优点：

 

1. 灵活性：与计算属性相比，Method更加灵活，可以接收参数，处理更复杂的逻辑。

2. 无缓存：Methods每次执行或重渲染时都会调用，这对于需要实时反馈，且不需要缓存结果的情况非常有用。例如，执行一次性的，不依赖于响应式数据的计算操作。

3. 清晰直观：Methods在组件中的定义非常清晰明了，可以让阅读代码的人很快地理解它们的功能。

4. 多用途：Methods不仅可用于计算属性值，还可以用于事件处理，来响应用户输入。

何时以及如何使用侦听器

当你需要在数据变化时执行异步或开销较大的操作时，这时候，你就需要使用 Watchers，也就是侦听器。侦听器可以帮助我们监控特定的数据，并在数据变化时反应。

 

使用侦听器的关键时机和方法如下：

 

1. 何时使用侦听器：

   • 当你需要在数据变化时进行异步操作或比较大的开销操作时.
   • 当你需要在某个数据变化时，操作另外的数据。
   • 监听路由、props或者Vuex状态变化。

2. 如何使用侦听器：

   • 在 Vue 实例中的 watch 选项内部声明你所需要监控的数据。
   • 对应的函数将在数据改变时触发。这个函数会接收两个参数，分别是新的值和旧的值。

 

例如：

data() {return {firstName: '',lastName: '',fullName: ''}
},
watch: {firstName(newVal, oldVal) {this.fullName = newVal + ' ' + this.lastName;},lastName(newVal, oldVal) {this.fullName = this.firstName + ' ' + newVal;}
}

 

在上述代码中，我们通过侦听器监听 firstName 和 lastName 的改变，并在它们改变时更新 fullName。在这个场景中，我们可以看到侦听器如何在数据改变时操作另外的数据。

 

总的来说，侦听器的主要用途是在一些数据需要随着其他数据变动而变动，或者数据变动需要执行异步操作或较大开销操作的场景下。

计算属性和侦听器的实战应用

在 Vue.js 开发中，计算属性和侦听器是两个非常重要和强大的特性。下面给出两个实际的应用例子说明一下它们的使用方法：

 

计算属性的使用：

 

假设我们在开发一个电商应用，有一个购物车组件被用来显示用户选中的商品以及总价。其中，商品会有名字和单价，用户可以选择商品的数量。总价是根据所有商品的单价和数量进行计算的。

 

这是典型使用计算属性的场景，我们可以用计算属性 totalPrice 来动态计算购物车的总价。

data() {return {cart: [{name: 'Apple', price: 10, quantity: 5},{name: 'Orange', price: 20, quantity: 3},]}
},
computed: {totalPrice() {return this.cart.reduce((total, item) => {return total + item.price * item.quantity;}, 0);}
}

 

在这个例子中，计算属性 totalPrice 会随着购物车里的商品数量或者商品单价的改变而自动更新，并将结果缓存，从而避免不必要的重复计算。

 

侦听器的使用：

 

假设我们在开发一个天气应用，用户可以输入城市名获取该城市的天气信息。在这个例子中，我们希望当用户更改城市名时，自动发送一个请求去获取新的天气信息。

 

这个时候我们就可以使用侦听器来监听城市名称的改变，然后执行相应的操作：

data() {return {city: 'Beijing',weather: ''}
},
watch: {city(newCity) {this.getWeather(newCity);}
},
methods: {async getWeather(cityName) {// 发送请求获取城市天气信息，并更新 this.weatherlet response = await axios.get(`https://api.weather.com/${cityName}`);this.weather = response.data;}
}

 

在这个例子中，侦听器 city 被用来监听 city 数据的改变。每当 city 数据改变时，就会调用 getWeather 方法去获取新的天气信息。

 

这个例子显示了侦听器如何用于在数据变动时执行异步操作这种场景。