发布时间:2023-11-15 18:00
computed是vue的计算属性,是根据依赖关系进行缓存的计算,只有在它的相关依赖发生改变时才会进行更新
一般情况下,computed默认使用的是getter属性
1. computed的每一个计算属性都会被缓存起来,只要计算属性所依赖的属性发生变化,计算属性就会重新执行,视图也会更新。下面代码中,计算属性fullName,它依赖了firstName和lastName这两个属性,只要它们其中一个属性变化,fullName就会重新执行。
2.computed计算属性会被缓存,在下面代码中使用了两次fullName,但在控制台只输出了一次 “这是fullName”。
<template>
<div>
<div>
姓:<input type="text" v-model="firstName" />
</div>
<div>
名:<input type="text" v-model="lastName" />
</div>
<!-- 调用两次fullName -->
<div>姓名:{{ fullName }}</div>
<div>姓名:{{ fullName }}</div>
</div>
</template>
<script>
export default {
data() {
return {
firstName: "张",
lastName: "三",
};
},
computed: {
fullName() {
console.log("这是fullName");
return this.firstName + this.lastName;
}
}
};
</script>
当一个数据受多个数据影响时,可以使用computed
1.本组件计算
2.计算props的值
3.计算vuex的state或者getters值的变化
参考:https://cn.vuejs.org/v2/guide/computed.html
https://segmentfault.com/a/1190000012948175
【用pandas_alive几行代码绘制竞赛动图】二、专栏学习说明(配置好的venv虚拟环境+拿来即用测试代码+测试数据集+参数api解析)
Google、Oracle CEO就Android专利问题共同出庭
Java Redis Template批量查询指定键值对的实现
Play to earn?Axie Infinity已成为NFT游戏天花板、领军Web3
机器人抓取(五)—— 手眼标定 hand eye calibration
精度96.63%、FPS 63,SOTA人像分割方案PP-HumanSeg v2开箱即用!
解决VMware ping 不通主机和主机ping不通虚拟机的问题
AE插件:Red Giant Trapcode Suite红巨星粒子插件