vue3中的计算属性computed?
vue3中的计算属性computed
·
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
提示:以下是本篇文章正文内容,下面案例可供参考
一、computed
computed
函数就是指当我们需要一个值,这个值随着其他值的变化而进行变化,我们就可以将其放入computed中,computed是用来定义计算属性的
computed有两个方法,分别是set()和get()。它可以接受一个带有 get
和 set
函数的对象来创建一个可写的 ref 对象。
<template>
<div>
<h1>计算属性</h1>
<hr />
<button @click="age = 25">点击改变年龄</button>
<button @click="threeAge = 28">点击改变threeAge年龄</button>
<div>今年:{{ age }}岁</div>
<div>明年:{{ nextAge }}岁</div>
<div>后年:{{ threeAge }}岁</div>
</div>
</template>
<script>
import { ref, computed } from "vue";
// 计算属性computed:基于现有的数据,计算出一种数据
export default {
setup() {
const age = ref(18);
const nextAge = computed(() => {
// 在回调函数中必须return,结果就是计算的结果;如果计算依赖属性的数据发生变化,那么就会重新计算
return age.value + 1;
});
// 修改计算属性
const threeAge = computed({
get() {
// 如果读取计算属性的值,默认调用get的方法
return age.value + 2;
},
set(val) {
// val是计算属性下边传递的实参,如果想要修改计算属性的值,默认调用set方法
age.value = val - 2;
},
});
return { age, nextAge,threeAge };
},
};
</script>
<style lang="scss" scoped>
</style>
二、为什么要有computed?
模板中逻辑过重,不易维护,所以使用计算属性computed来简化书写响应式状态的复杂逻辑
。
总结
- 计算属性可以直接
读取
或者修改
- 如果要实现计算属性的修改操作,那么computed的实参应该是对象
- 读取数据触发
get
方法 - 修改数据触发
set
方法,set函数的形参就是你赋给他的值
更多推荐
已为社区贡献1条内容
所有评论(0)