Vue的计算属性

Vue的计算属性

    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、发送数据等。