计算属性:需要对数据进行二次运算才使用,里面的值不变调用的话就使用缓存,除非里面依赖的数据项发生改变才会调用函数进行再次运算,依赖项可以有多个
直接对原始值进行二次计算
<template>
<h2>计算属性</h2>
<div style="margin-bottom: 10px;">
<span>初始值{{ count }}</span> |
<span>双倍添加: {{ doubleCount }}</span>
<div>
<el-button @click="count++">+1</el-button>
</div>
</div>
</template>
<script setup>
const count = ref(1)
const doubleCount = computed(() => {
return count.value * 2
})
</script>
接收外部的值,传值计算
<template>
<h2>计算属性传值</h2>
<div>
<div v-for="item in users" :key="item.id" class="info">
<span>姓名:{{ item.username }}</span>
<span>存款:{{ item.deposit }}</span>
<span>贷款:{{ item.loans }}</span>
<span class="active">账户余额:{{ accountBalance(item) }}</span>
</div>
</div>
</template>
<script setup>
// 模拟后端返回的数据
const users = ref([
{
username: '张三',
deposit: 300000,
loans: 2000000,
id: 1
},
{
username: '李四',
deposit: 80000,
loans: 100000,
id: 2
},
{
username: '王五',
deposit: 600000,
loans: 0,
id: 3
}
])
const accountBalance = computed(() => {
return function(item) {
const {deposit, loans} = item
const account = deposit - loans
return '¥\n' + account
}
})
</script>
grtter/setting
<template>
<div>{{ fullName }}</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const fristName = ref('Hello')
const lastName = ref('World')
const fullName = computed({
get() {
return fristName.value + ' ' + lastName.value
},
set(value) {
const names = value.split(' ')
fristName.value = names[0]
lastName.value = names[1]
}
})
setInterval(() => {
fullName.value = 'Hello Tom'
}, 3000)
</script>
<style lang="scss" scoped></style>
计算属性的 getter 应只做计算而没有任何其他的副作用,这一点非常重要,请务必牢记。举例来说,不要改变其他状态、在 getter 中做异步请求或者更改 DOM!