自建站有哪些,dz论坛网站源码,中国百强城市榜单公布,做网站多久能盈利Vue的计算属性#xff0c;是一种架构设计中的权衡结果。现在的前端架构#xff0c;上规模的都是类似于MVVM风格的。在这种架构下#xff0c;会存在一种情况#xff0c;从后台取回的数据不能直接展示#xff0c;需要满足一定条件时做一些临时性的转换#xff0c;将原本的数… Vue的计算属性是一种架构设计中的权衡结果。现在的前端架构上规模的都是类似于MVVM风格的。在这种架构下会存在一种情况从后台取回的数据不能直接展示需要满足一定条件时做一些临时性的转换将原本的数据转换成另一种含义的数据才能做展示转换后的数据仅做业务展示不再继续保存。为了对这种情况做出统一的处理Vue框架为Vue组件添加了计算属性。计算属性是基于组件响应式属性进行数据计算的结算结果仅做展示。计算属性仅当组件的响应式属性发生变化时才会重新计算。
script setup langts
import {computed, nextTick, ref} from vueconst countref(0);
const listref([a,b,c]);
list.value[1]e;function increment(){count.value;nextTick();if(count.value3){list.value[count.value]add;}
}//computed attribute
const sizecomputed((){return list.value.length;
});
/scripttemplate
button clickincrement{{ count }}/button
div v-foritem in list :keyitemspan{{ item }}/span
/div
div{{ size }}/div
/template Vue中的组件计算属性是存在get/set方法的尽量确保get方法中仅仅只是根据响应属性做计算不要做其他附加操作如更新DOM、发送数据等。
