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

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

一、计算属性

1.什么是计算属性

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

1. 数据处理：计算属性可以用于对数据进行处理和计算，例如对原始数据进行格式化、筛选、排序等操作，以便在视图中直接使用处理后的数据。

2. 响应式更新：计算属性会根据其所依赖的响应式属性的变化而自动更新。这意味着当依赖的数据发生变化时，计算属性会自动重新计算其值，从而保持视图的实时更新。

3. 模块化和复用：通过将复杂的数据处理逻辑封装在计算属性中，可以提高代码的可维护性和可读性。此外，计算属性还可以在不同的组件中进行复用，从而避免重复编写相同的数据处理逻辑。

4. 缓存：计算属性会缓存其计算结果，只有在依赖的响应式属性发生变化时才会重新计算。这样可以避免不必要的重复计算，提高性能。

总的来说，计算属性在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>
  

• 事件：

原生 DOM 事件是指由浏览器原生支持的事件，Vue 3中支持的原生 DOM 事件包括但不限于：

1. 点击事件（click）
2. 双击事件（dblclick）
3. 鼠标移入事件（mouseenter）
4. 鼠标移出事件（mouseleave）
5. 键盘按下事件（keydown）
6. 键盘松开事件（keyup）
7. 输入事件（input）
8. 变化事件（change）
9. 提交事件（submit）
10. 滚动事件（scroll）
11. 聚焦事件（focus）
12. 失焦事件（blur）
13. 鼠标移动事件（mousemove）
14. 鼠标按下事件（mousedown）
15. 鼠标松开事件（mouseup）
16. … 拖拽事件（drag）
17. … 拖拽开始事件（dragstart）
18. … 拖拽结束事件（dragend）
19. … 拖拽进入目标元素事件（dragenter）
20. … 拖拽离开目标元素事件（dragleave）

这些是常见的原生 DOM 事件，Vue 3可以通过@符号在模板中绑定这些事件，并在对应的处理函数中执行相应的逻辑。