「Vue3系列」Vue3 计算属性（computed）、监听属性（watch）

您所在的位置：网站首页 › vue3监听多个数据变化 › 「Vue3系列」Vue3 计算属性（computed）、监听属性（watch）

「Vue3系列」Vue3 计算属性（computed）、监听属性（watch）

2024-05-29 23:53| 来源: 网络整理| 查看: 265

一、Vue3 计算属性（computed）

在 Vue 3 中，计算属性（Computed Properties）是一种强大的功能，它允许你声明一个依赖于其他响应式数据属性的属性，并且这个属性的值会根据其依赖的数据的变化而自动更新。计算属性是基于它们的依赖关系进行缓存的，只有在它的相关依赖发生改变时才会重新求值。

下面是如何在 Vue 3 中使用计算属性的一个简单示例：

原始值：{{ message }} 计算后的值：{{ reversedMessage }} 修改原始值 import { ref, computed } from 'vue'; export default { setup() { const message = ref('Hello Vue3'); const reversedMessage = computed(() => { return message.value.split('').reverse().join(''); }); return { message, reversedMessage }; } }

在这个例子中，我们有一个响应式引用 message，它包含一个字符串。我们还定义了一个计算属性 reversedMessage，它返回 message 的逆序字符串。当 message 的值发生变化时，reversedMessage 的值也会自动更新。

在 Vue 3 的 Composition API 中，我们使用 setup 函数来定义组件的逻辑。在这个函数中，我们可以使用 ref 来创建响应式引用，使用 computed 来创建计算属性。

计算属性在处理复杂逻辑或计算时非常有用，因为它们可以缓存结果，只有在依赖的数据发生变化时才会重新计算，这有助于提高性能。

二、Vue3 计算属性的getter与setter

在 Vue 3 中，计算属性不仅仅是一个简单的计算结果的缓存，它们还允许你定义一个 setter 函数，该函数会在你尝试修改计算属性的值时触发。这为你提供了一种方式来观察或拦截对计算属性的更改。

下面是一个使用 getter 和 setter 的计算属性示例：

计算属性的值：{{ computedValue }} 增加计算属性的值 import { ref, computed } from 'vue'; export default { setup() { const baseValue = ref(1); const computedValue = computed({ get() { return baseValue.value * 2; // Getter }, set(newValue) { baseValue.value = newValue / 2; // Setter } }); function incrementComputedValue() { // 直接修改计算属性的值会触发 setter computedValue.value += 1; } return { computedValue, incrementComputedValue }; } }

在这个例子中，computedValue 是一个计算属性，它有一个 getter 和一个 setter。getter 函数返回 baseValue 的两倍，而 setter 函数接受一个新的值，并将其除以 2 来更新 baseValue。

当你尝试通过 computedValue.value = someValue 修改计算属性的值时，setter 会被调用。在上面的示例中，当你点击按钮时，incrementComputedV

【本文地址】

「Vue3系列」Vue3 计算属性（computed）、监听属性（watch）

「Vue3系列」Vue3 计算属性（computed）、监听属性（watch）

今日新闻

推荐新闻