两周掌握Vue3（四）：计算属性、监听属性、事件处理

文章目录

一、计算属性
- 1.什么是计算属性
- 2.代码示例
二、监听属性
三、事件处理

代码仓库：跳转
当前分支：04

一、计算属性

1.什么是计算属性

Vue 中的计算属性具有以下作用：

数据处理：计算属性可以用于对数据进行处理和计算，例如对原始数据进行格式化、筛选、排序等操作，以便在视图中直接使用处理后的数据。
响应式更新：计算属性会根据其所依赖的响应式属性的变化而自动更新。这意味着当依赖的数据发生变化时，计算属性会自动重新计算其值，从而保持视图的实时更新。
模块化和复用：通过将复杂的数据处理逻辑封装在计算属性中，可以提高代码的可维护性和可读性。此外，计算属性还可以在不同的组件中进行复用，从而避免重复编写相同的数据处理逻辑。
缓存：计算属性会缓存其计算结果，只有在依赖的响应式属性发生变化时才会重新计算。这样可以避免不必要的重复计算，提高性能。

总的来说，计算属性在Vue中扮演着对数据进行处理、响应式更新、模块化和复用以及缓存等方面的重要角色，能够帮助我们更加高效地管理和处理组件中的数据。

2.代码示例

在这个示例中，我们定义了一个名为price的数据属性和一个名为discount的数据属性，它们分别表示商品的原始价格和折扣比例。然后，在computed属性中，我们定义了两个计算属性originalPrice和discountedPrice，分别用于计算原始价格和折扣后的价格。

当price或discount发生变化时，originalPrice和discountedPrice会自动重新计算其值，并且在模板中使用它们时会自动更新视图。这样，我们就可以方便地对价格进行处理和计算，而且不需要手动管理其更新逻辑。

App.vue

<template>
  <div>
    <p>原始价格：{{ originalPrice }}</p>
    <p>折扣后的价格：{{ discountedPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 100,
      discount: 0.2
    };
  },
  computed: {
    originalPrice() {
      return this.price;
    },
    discountedPrice() {
      return this.price * (1 - this.discount);
    }
  }
};
</script>

效果：

在这里插入图片描述

二、监听属性

在 Vue 3 中，我们可以使用 watch 函数来监听属性的变化。

watch 函数接受两个参数：要监听的属性和回调函数。当被监听的属性发生变化时，回调函数就会被触发。

以下是一个完整的代码示例：

MyCounter.vue

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">增加计数</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    watch(count, (newValue, oldValue) => {
      console.log(`计数从 ${oldValue} 变为 ${newValue}`);
    });

    return {
      count,
      increment
    };
  }
};
</script>

在这个示例中，我们首先导入了 ref 和 watch 函数。然后在 setup 函数中，我们使用 ref 创建了一个名为 count 的响应式属性，并定义了一个 increment 函数来增加 count 的值。接着，我们使用 watch 函数来监听 count 的变化，并在回调函数中打印出新旧值。

当点击按钮增加计数时，count 的值会发生变化，watch 中的回调函数就会被触发，打印出新旧值。这样，我们就可以方便地监听属性的变化，并在变化时执行相应的逻辑。

在这里插入图片描述

三、事件处理

我们可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。

v-on 指令可以缩写为 @ 符号。以下是代码示例：

ClickCom.vue

<template>
    <button @click="handleClick">点击我</button>
  </template>
  
  <script>
  export default {
    methods: {
      handleClick() {
        alert('按钮被点击了！')
      }
    }
  };
  </script>