文章目录
- 一、计算属性
- 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>
- 事件：
原生 DOM 事件是指由浏览器原生支持的事件，Vue 3中支持的原生 DOM 事件包括但不限于：
- 点击事件（click）
- 双击事件（dblclick）
- 鼠标移入事件（mouseenter）
- 鼠标移出事件（mouseleave）
- 键盘按下事件（keydown）
- 键盘松开事件（keyup）
- 输入事件（input）
- 变化事件（change）
- 提交事件（submit）
- 滚动事件（scroll）
- 聚焦事件（focus）
- 失焦事件（blur）
- 鼠标移动事件（mousemove）
- 鼠标按下事件（mousedown）
- 鼠标松开事件（mouseup）
- … 拖拽事件（drag）
- … 拖拽开始事件（dragstart）
- … 拖拽结束事件（dragend）
- … 拖拽进入目标元素事件（dragenter）
- … 拖拽离开目标元素事件（dragleave）
这些是常见的原生 DOM 事件，Vue 3可以通过@符号在模板中绑定这些事件，并在对应的处理函数中执行相应的逻辑。
