vue3中的computed函数详解：方便计算属性的使用
计算属性是Vue中常用的一种方式，主要用于在模板中放置逻辑计算，方便开发者进行数据操作和展示。在Vue3中，计算属性依然是非常重要的一种功能，而computed函数则更加的方便计算属性的使用。本文将对Vue3中的computed函数进行详细的介绍和讲解。
什么是computed函数
computed函数是Vue3中的一个内置函数，它主要用于创建一个计算属性。通过使用computed函数，我们可以方便地创建一个计算属性，使代码更为简洁和可读。computed函数在组件实例中函数式声明，只要该计算属性依赖的响应式变量发生变化，它就会自动更新。
computed函数的基本用法
使用computed函数创建一个计算属性，只需要在组件中声明一个函数式属性即可。下面是一个使用computed函数创建计算属性的简单示例代码：
<template>
<div>
<p>原来的值：{{ multiplied }}</p>
<p>改变后的值：{{ multipliedByTwo }}</p>
<button @click="updateValue">更新</button>
</div>
</template>
<script>
export default {
data() {
return {
value: 10,
}
},
computed: {
multiplied() {
return this.value * 2
},
multipliedByTwo() {
return this.multiplied * 2
},
},
methods: {
updateValue() {
this.value = 20
}
}
}
</script>在上面的示例代码中，我们定义了一个data属性value来表示计算属性的原始值。通过computed函数创建了两个计算属性，分别是multiplied和multipliedByTwo。其中multiplied依赖的是data属性中的value变量，而multipliedByTwo则依赖于multiplied。通过这样的方式，我们可以方便地启用计算属性，并实时计算相关的数值。
立即学习“前端免费学习笔记（深入）”；
computed函数的高级用法
computed函数还有一些高级的用法，可以更好地控制计算属性的行为，下面将逐一进行介绍。
1. Getters和Setters
computed函数可以通过getters和setters控制计算属性的读取和更新。getters是计算属性的读取函数，而setters是计算属性的更新函数。默认情况下，计算属性都是只读不可更改的，但是通过setters函数，我们可以直接修改计算属性的值，从而达到强制更新的目的。
下面是一个使用getters和setters的计算属性实例代码：
<template>
<div>
<p>原来的价格：{{ price }}</p>
<p>折扣后的价格：{{ discountedPrice }}</p>
<button @click="applyDiscount">打折</button>
</div>
</template>
<script>
export default {
data() {
return {
originalPrice: 100,
discountPercentage: 10
}
},
computed: {
price: {
get() {
return this.originalPrice
},
set(newPrice) {
this.originalPrice = newPrice
}
},
discountedPrice() {
const discount = this.discountPercentage / 100
return this.price - (this.price * discount)
}
},
methods: {
applyDiscount() {
this.price = this.price - 10
}
}
}
</script>在上面的示例代码中，我们声明了一个计算属性price，同时定义了它的getters和setters函数。discountedPrice依赖于price，当price变化时，discountedPrice也会自动更新。此外，我们也定义了一个方法applyDiscount，可以通过执行该方法直接修改计算属性price，这样就能实现计算属性的强制更新了。
2. 计算属性的缓存
在Vue3中，计算属性的缓存默认情况下是启用的。这意味着，在计算属性的依赖变量没有发生变化的情况下，计算属性会直接返回上一次的结果，而不是重新计算。这样就能节省计算时间和性能，提高代码的执行效率。
下面是一个计算属性缓存的示例代码：
<template>
<div>
<p>原来的数量：{{ count }}</p>
<p>倍数：{{ multiplier }}</p>
<p>计算结果：{{ computedValue }}</p>
<button @click="updateCount">更新数量</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
multiplier: 2
}
},
computed: {
computedValue() {
console.log('计算属性执行')
return this.count * this.multiplier
}
},
methods: {
updateCount() {
this.count++
}
}
}
</script>在上面的示例代码中，我们声明了一个计算属性computedValue，用于计算count和multiplier的乘积。在mounted生命周期后，执行一次计算属性，此时计算属性的缓存就会被启用。在updateCount方法中，我们通过更新count变量的值，触发了computedValue的重新计算。此时在控制台中可以发现，计算属性只有在值变化时才会重新计算。
如果不想启用计算属性的缓存，在计算函数中可以使用ref函数来实现。ref函数会返回一个响应式的对象，每次访问该对象时都会重新计算计算函数。
import Vue, { ref } from 'vue'
export default {
setup() {
const count = ref(0)
const computedValue = () => {
console.log('计算属性执行')
return count.value * 2
}
return {
count,
computedValue
}
}
}总结
computed函数是Vue3中非常重要的一种功能，它通过创建计算属性，为我们提供了非常方便的数据操作方式。通过本文的介绍，相信读者已经对computed函数具有了基本的了解，同时掌握了一些高级用法和技巧。在Vue3的开发中，熟练掌握computed函数的使用，一定会为我们的编码工作带来巨大的帮助。
