Vue的计算属性,是一种架构设计中的权衡结果。现在的前端架构,上规模的都是类似于MVVM风格的。在这种架构下,会存在一种情况,从后台取回的数据不能直接展示,需要满足一定条件时做一些临时性的转换,将原本的数据转换成另一种含义的数据才能做展示,转换后的数据仅做业务展示不再继续保存。为了对这种情况做出统一的处理,Vue框架为Vue组件添加了计算属性。计算属性是基于组件响应式属性进行数据计算的,结算结果仅做展示。计算属性仅当组件的响应式属性发生变化时才会重新计算。
<script setup lang="ts">
import {computed, nextTick, ref} from "vue"
const count=ref(0);
const list=ref(["a","b","c"]);
list.value[1]="e";
function increment(){
count.value++;
nextTick();
if(count.value>=3){
list.value[count.value]="add";
}
}
//computed attribute
const size=computed(()=>{
return list.value.length;
});
</script>
<template>
<button @click="increment">{{ count }}</button>
<div v-for="item in list" :key="item">
<span>{{ item }}</span>
</div>
<div>{{ size }}</div>>
</template>
Vue中的组件计算属性是存在get/set方法的,尽量确保get方法中仅仅只是根据响应属性做计算,不要做其他附加操作,如更新DOM、发送数据等。