Vue计算属性_监听器

计算属性 Computed Properties 监听器

计算属性监听器是一种在计算属性的值发生变化时，自动执行一段代码的方法。它可以用于监控和响应计算属性的变化，在需要时执行相应的逻辑操作。

• 优点

  • 自动触发：计算属性监听器可以自动触发，无需手动调用。

  • 简化代码：使用计算属性监听器可以简化代码逻辑和结构，提高可读性和可维护性。

  • 实时更新：计算属性监听器可以实时更新计算属性的值，确保计算结果始终是最新的。

• 缺点

  • 性能开销：计算属性监听器可能会带来一定的性能开销，特别是当计算量比较大或计算频率较高时。

  • 代码复杂性：使用计算属性监听器可能会增加代码的复杂性，需要注意避免出现逻辑错误和死循环。

举例

// 假设有一个购物车对象
const shoppingCart = {
  items: ['apple', 'banana', 'orange'],

  // 计算属性：获取购物车中商品的总数量
  get totalItems() {
    return this.items.length;
  }
};

// 添加计算属性监听器
Object.defineProperty(shoppingCart, 'totalItems', {
  get() {
    console.log('计算总数量中...');
    return this.items.length;
  },
  set(value) {
    console.log('设置总数量为', value);
  }
});

// 输出购物车中商品的总数量
console.log(shoppingCart.totalItems);  // 输出：计算总数量中... 3

// 修改购物车中商品的数量
shoppingCart.items.push('grape');
console.log(shoppingCart.totalItems);  // 输出：计算总数量中... 4

// 设置购物车中商品的总数量
shoppingCart.totalItems = 10;          // 输出：设置总数量为 10

在上面的示例中，我们定义了一个购物车对象 shoppingCart ，其中包含一个计算属性 totalItems ，用于获取购物车中商品的总数量。我们使用 Object.defineProperty() 方法添加了一个计算属性监听器，当计算属性 totalItems 被获取或设置时，将触发相应的逻辑。

在获取计算属性 totalItems 时，将打印出 计算总数量中...，然后返回购物车中商品的总数量。因此，当我们调用 shoppingCart.totalItems 时，会触发计算属性监听器，打印出日志并返回当前的商品总数量。

在修改购物车中的商品数量后，再次获取计算属性 totalItems ，将再次触发计算属性监听器，并输出更新后的商品总数量。

最后，当我们尝试设置购物车中商品的总数量时，将触发计算属性的设置操作，并打印出设置的值。注意，由于计算属性没有定义 setter 方法，设置操作将被忽略。

该示例展示了计算属性监听器的使用方法，并展示了触发的时机和相应的执行逻辑