vue2计算属性computed
2023-03-31 10:44:04 时间
1.什么是计算属性
概念:
1.计算属性是vue的一个特性,此属性有计算能力,也就相当于一个函数。可以将计算结果缓存,作为一个属性使用。
特点:
1.要在 methods: { } 或者 computed: { } 中 ,以方法(函数)的形式定义。
2.之后要使用就可以直接使用属性名代替这个重复的计算。
好处:
1.可以实现代码复用
2.计算属性就会自动重新求值,只要计算源数据任何一项发生了变化,计算属性都会立刻更新,实现动态计算。
eg:我们先看个小例子:
通过输入 r、g、b来改变box的背景色,其中有个 `rgb(${r}, ${g}, ${b})` 多次使用
为了提高代码的复用,我们可以使用计算属性 computed
2.计算属性computed
优点:
1.支持缓存,当数据源发生变化,会随即重新计算;
2.不支持异步,无法监听异步操作导致的数据变化;
3.如果一个属性是由其他属性计算而来,形成了一对一、多对一,就可以使用 computed;
4.代码演示:
computed: {
rgb() {
//返回一个字符串,可被当作rgb字符串使用
//r、g、b中的任意一个发生变化 rgb都会发生改变
return `rgb( ${this.r}, ${this.g}, ${this.b} )`
}
}
之后所有的 `rgb(${r}, ${g}, ${b})` 都可以用 rgb 代替 ,优化后的代码如下:
感谢浏览!
相关文章
- WebSocket集群分布式改造:实现多人在线聊天室
- MongoDB之TextSearch简介
- 快速搭建Zookeeper和Kafka环境
- 【秒杀系统】秒杀系统实战(四)| 缓存与数据库双写一致性实战
- 【秒杀系统】秒杀系统实战(五)| 如何优雅的完成订单异步处理
- 缓存与数据库双写一致性 深度分析
- MySQL选错索引导致的线上慢查询事故
- MongoDB中的高级查询(二)
- MongoDB新增及查询数据(一)
- MongoDB安装及shell简介
- MongoDB基本概念
- MongoDB分片之数据分割方式
- 【从零开始撸一个App】RecyclerView的使用
- 用代码控制网络断开与重连
- 国内“谁”能实现chatgpt,短期穷出的类ChatGPT简评(算法侧角度为主),以及对MOSS、ChatYuan给出简评,一文带你深入了解宏观技术路线。
- 《汇编语言》学习笔记-0
- C基本知识
- FreeRTOS-05-队列
- 热门数据集提供【MNIST、鸢尾花、猫狗、CIFAR10、vegetables、Ox-Flowers17、pascalvoc】
- SHA256/SHA512码计算方式