computed计算属性

64 阅读1分钟

计算属性指的是通过一系列运算之后,最终得到一个属性值。

这个动态计算出来的属性值可以被模板结构或 methods 方法使用。

<div class="box" :style="{ backgroundColor: rgb }">
  {{ rgb }}
</div>
<button @click="show">按钮</button>
data: {
  // 红色
  r: 0,
  // 绿色
  g: 0,
  // 蓝色
  b: 0
},
methods: {
  // 点击按钮,在终端显示最新的颜色
  show() {
    console.log(this.rgb)
  }
},
// 所有的计算属性,都要定义到 computed 节点之下
// 计算属性在定义的时候,要定义成“方法格式”
computed: {
  // rgb 作为一个计算属性,被定义成了方法格式,
  // 最终,在这个方法中,要返回一个生成好的 rgb(x,x,x) 的字符串
  rgb() {
    return `rgb(${this.r}, ${this.g}, ${this.b})`
  }
}

计算属性的特点

① 虽然计算属性在声明的时候被定义为方法,但是计算属性的本质是一个属性

② 计算属性会缓存计算的结果,只有计算属性依赖的数据变化时,才会重新进行运算