两周掌握Vue3(四):计算属性、监听属性、事件处理

发布时间:2024年01月12日

代码仓库:跳转
当前分支: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>

在这个示例中,我们首先导入了 refwatch 函数。然后在 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可以通过@符号在模板中绑定这些事件,并在对应的处理函数中执行相应的逻辑。

文章来源:https://blog.csdn.net/Tracycoder/article/details/135533225
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。