从计算属性到监视属性：Vue.js的响应式编程奥秘

2023-09-27 08:10:34

计算属性与监视属性：打造响应式Vue.js应用程序的动态二人组

计算属性：精明的管家，时刻保持数据最新

想象一下，您家中的管家是一位计算属性，它不断监控着厨房的储藏室，密切关注着每件商品的数量变化。当您从货架上拿走一袋面粉时，管家就会立刻意识到这种变化，并更新自己的库存记录，确保它始终反映着厨房的实际情况。

在 Vue.js 中，计算属性扮演着类似的角色，它们是一种特殊类型的属性，不是直接存储数据，而是根据其他属性的值进行计算。这些依赖属性发生变化时，计算属性的值会自动更新，就像管家更新库存记录一样。

监视属性：敏锐的守卫，即时响应数据变化

现在，想象一下，您的管家还兼任警卫，时刻监视着厨房的大门，留意着任何进入或离开的动静。当您带进一袋新的大米时，警卫会立即注意到，并触发一系列操作，例如更新库存记录、向您发送通知，甚至准备一顿美餐。

在 Vue.js 中，监视属性与警卫类似，它们允许您在特定属性（包括计算属性）发生变化时执行特定的操作。您可以将监视属性看作是一种“值改变警报器”，一旦被监视的属性发生变化，它就会触发回调函数，让您有机会做出相应的响应，就像警卫在有人进出厨房时采取行动一样。

计算属性与监视属性携手共创响应式奇迹

就像管家和警卫共同管理着厨房一样，计算属性和监视属性在 Vue.js 中携手合作，打造出响应式应用程序的动态二人组。计算属性负责计算和缓存数据，而监视属性则负责监视数据变化并触发适当的反应。

代码示例：购物车结算中的计算属性和监视属性协作

让我们以购物车结算页面为例，来说明计算属性和监视属性如何协同工作：

<template>
  <div>
    <ul>
      <li v-for="item in cartItems" :key="item.id">
        {{ item.name }} x {{ item.quantity }} = ${{ item.price * item.quantity }}
      </li>
    </ul>
    <hr>
    <p>总价：{{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartItems: [
        { id: 1, name: 'Apple', price: 1.00, quantity: 2 },
        { id: 2, name: 'Orange', price: 2.00, quantity: 1 },
        { id: 3, name: 'Banana', price: 3.00, quantity: 3 }
      ]
    }
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
    }
  },
  watch: {
    cartItems: {
      handler(newValue, oldValue) {
        // 当购物车中的商品发生变化时，重新计算总价
        this.totalPrice = this.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
      },
      deep: true
    }
  }
}
</script>