花式展示Vue计算属性和监视属性的灵活性

2024-02-10 12:13:05

在Vue中，计算属性和监视属性是数据绑定的两个非常有用的特性，它们可以帮助我们在Vue组件中高效管理和操作数据。

计算属性

计算属性是一个函数，它依赖于一个或多个其他属性，当这些属性发生变化时，计算属性也会重新计算并更新。计算属性通常用于在视图中执行复杂的计算。例如，我们可以创建一个计算属性来计算购物车中所有商品的总价格。

export default {
  data() {
    return {
      items: [
        { name: 'Apple', price: 1.00 },
        { name: 'Orange', price: 2.00 },
        { name: 'Banana', price: 3.00 }
      ]
    }
  },
  computed: {
    totalPrice() {
      return this.items.reduce((total, item) => total + item.price, 0)
    }
  }
}

在上面的示例中，totalPrice是一个计算属性，它依赖于items属性。当items属性发生变化时，totalPrice也会重新计算并更新。这使我们在视图中可以很容易地访问购物车中所有商品的总价格。

监视属性

监视属性是一个函数，它监视一个或多个其他属性，当这些属性发生变化时，监视属性就会被调用。监视属性通常用于在数据更改时执行某些操作，例如，我们可以创建一个监视属性来在购物车中添加或删除商品时更新总价格。

export default {
  data() {
    return {
      items: [
        { name: 'Apple', price: 1.00 },
        { name: 'Orange', price: 2.00 },
        { name: 'Banana', price: 3.00 }
      ]
    }
  },
  watch: {
    items(newVal, oldVal) {
      console.log('Items have changed from', oldVal, 'to', newVal)
    }
  }
}